vuex总结
Vuex是通过创建一个store的实例并配置相应的配置项来管理公共状态的
一、State：vuex中的‘data’
组 件中引入vuex中的store实例后通过store.state.属性来访问vuex中统一管理的数据，组件中从vuex中读取状态最简单的方法是在计算属性中，这样vuex中的状态变化的时候计算属性就会重新求取计算属性，并更新dom
使用store中的state问题一：每个组件使用的时候都需要引入store，
解决：通过根实例中注册store选项，该store实例就会注入到根组件下的所有子组件，子组件中通过this.$store访问
问题二：当一个组件需要多个状态时需要定义多个计算属性，很繁琐，
解决：可以使用辅助函数mapState来统一导入
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
问题三：上述能整体引入属性了，但是没有办法将它与局部计算属性混合使用
解决：使用对象展开运算符，将上边的mapState前边加上…，在写其他的计算属性就可以混合使用了
computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}
注意：虽然vuex方便管理状态，但是没有必要将所有的都放入vuex中，那样会造成代码冗长不直观，可以把需要公用的状态放入vuex中
二、Getter：vuex中的‘computed’
通过store中的state派生一些状态的时候可以使用getter，相当于组件中的computed，getter中接受state作为第一个参数
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
//Getter 也可以接受其他 getter 作为第二个参数
getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
store.getters.doneTodosCount // -> 1
访问方式：
属性访问：将store放入全局组件中后可以通过this.$store.getters.doneTodosCount来访问store中的计算属性
方法访问：通过让 getter 返回一个函数，来实现给 getter 传参
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
改善：getter中也会出现类似state中的问题，vuex同样提供了辅助函数mapGetter
三、Mutation：vuex中的‘method’
不直接在state中改变状态是因为统一使用mutation来改变可以更好的追踪到状态的变化
组建中通过store.commit(vue中的方法名)来调用vuex统一管理的方法
Mutation中的方法中第一个是state，第二个可以加入形参，在访问的时候commit中第二个放入实参
Mutation必须是同步的函数
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）
四、Action：由于mutation只能是同步的函数所以需要action来执行异步的函数
Action 提交的是 mutation，而不是直接变更状态
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters
你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）
Action可以通过promise来组合多个action来处理更加复杂的异步流程
表单中的双向绑定
假设表单中绑定的是在计算属性返回的属于vuex store的对象，用户输入的时候就会试图去直接改变vuex中的状态，而一般不能直接修改vuex中的状态
方法一：需要通过mutation去修改：给 <input> 中绑定 value，然后侦听 input 或者 change事件
<input :value="message" @input="updateMessage"> // ... computed: { ...mapState({ message: state => state.obj.message }) }, methods: { updateMessage (e) { this.$store.commit('updateMessage', e.target.value) } } //下面是 mutation 函数： // ... mutations: { updateMessage (state, message) { state.obj.message = message } }
方法二：在计算属性的set中调用mutation来改变当前值，并在mutation中取得新的值进行赋值
<input v-model="message"> // ... computed: { message: { get () { return this.$store.state.obj.message }, set (value) { this.$store.commit('updateMessage', value) } } }
