Vuex 快速入门
基本用途：
将某些data变成组件间公用的状态，组件随时都可以进行访问和响应，解决了props传值的链式响应的代码冗余
给状态配以公用方法，将状态的变更及时响应并处理
基本用法：
/store/store.js
import Vue from'vue';
import Vuex from'vuex';
Vue.use(Vuex);
exportconststore =newVuex.Store({
state: {
sideBarOpened:false//放置公用状态},
getters: {
changeState: state => {//相当于vue实例中的methods,用于处理公用data//自vuex 面向组件的数据处理}
},
mutations: {//写法与getters相类似//组件想要对于vuex 中的数据进行的处理//组件中采用this.$store.commit('方法名') 的方式调用，实现充分解耦//内部操作必须在此刻完成(同步)},
actions: {//使得mutations能够实现异步调用，实现例如延迟调用increment ({ commit }, payload) {
commit('突变方法名')//payload应该是一个对象，可通过模板方法调用传入对象的方式将数据从组件传入vuex},
asyncIncrement({commit}) => {
setTimeout(() => {
commit('increment')
},1000)
}
},
modules: {//引入某一个state的以上集合的模块，会自动分别填充到上面，使得结构更加清晰}
});
main.js
import { store } from'./store/store'*
*newVue({
el:'#app',
store,//注入根组件...
})
访问vuex中的数据和方法
this.$store.state.数据名
this.$store.getters.方法名
受影响组件局部定义计算属性响应变化数据
computed: {
open () {
returnthis.$store.state.sideBarOpened
}
}
将 store 中的 getters/mutations 映射到局部(计算属性/方法)使用mapGetters/mapMutations辅助函数
import { mapGetters } from'vuex'
computed: {
// 使用对象展开运算符将 getters 混入 computed 对象中
...mapGetters([
//映射 this.doneTodosCount 为 store.getters.doneTodosCount
'doneTodosCount',
//'getter名称',
// 映射 this.doneCount 为 store.getters.doneTodosCount
doneCount:'doneTodosCount'
// 三个点表示将内部拿出生成键值对，这样使得组件本身的计算属性不受影响
// 此语法依赖babel-preset-stage-2
])
}
注意事项：
mutation 必须是同步函数 — devtool要保存快照，方便追踪状态变化
使用 v-model 绑定 vuex 计算属性的时候要设置get 和 set 才能双向绑定
computed: {
value: {
get () {returnthis.$store.getters.value;
},
set (event) {this.$store.dispatch('updateValue', event.target.value); }
}}
