一、Vuex 是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
这个状态自管理应用包含以下几个部分：
- state，驱动应用的数据源；
- view，以声明方式将 state 映射到视图；
- actions，响应在 view 上的用户输入导致的状态变化。
VueX类似一个公共数据仓库，由三部分组成
vuex.png
其中公共仓库又细分为三个模块，每个模块对应单独的功能
- State 形似数据储存部分
- Actions 驱动Mutations方法修改储存里的数据，通过Actions可以形成异步修改数据，和修改数据版本迭代记录
- Mutations 可以略过Acitions方法进行数据修改，只是无法形成异步操作，例如网络请求回来的数据就需要用到异步
同时VueX还提供了一个Getter方法，从 store 中的 state 中派生出一些数据出来，类似vue中的计算属性。
二、具体实例代码
store部分代码
export default new Vuex.Store({
state: {
city: '北京'
},
// 不经过actions方法
mutations: {
changeCity(state, city) {
state.city = city
}
},
// 经过actions方法
actions: {
changeCity(ctx, city) {
ctx.commit('changeCity', city)
}
},
mutations: {
changeCity(state, city) {
state.city = city
}
},
getters: {
getLeval(state) {
if(state.city == '北京') return '一线城市'
return '二线城市'
}
}
modules: {
}
})
事件调用VueX部分
let methods = {
changCity(city) {
this.$store.dispatch('changeCity', city) // changeCity 是actions里的方法名。经过actions方法
this.$store.commit('changeCity', city) // changeCity 是Mutations里的方法名。不经过actions方法
}
};
//同理，可以采用更加简洁的辅助函数
import { mapMutations } from 'vuex'
let methods = {
changCity(city) {
this.changeCity(city) // 调用下面mapMutations函数映射出的 changeCity 方法
},
...mapMutations(['changeCity'])
}
vue中访问store数据
// 辅助函数访问
import { mapState } from 'vuex'
let computed = {
...mapState(['city','xxx']) //在页面中可以this.city即可访问store数据，getter同理
}
//通过属性访问
store.getters.getLeval
