写在前面：如果有对Vuex还不知道怎么用或者觉得看官方文档吃力的童鞋，建议读一下这一篇https://segmentfault.com/a/1190000009404727
1. 使用state
state:{
todos:[
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false}
}
2. 使用getters
getters的作用相当于组建中的computed，可以对state中的数据进行过滤并展示：
getters:{
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
3. 使用mutation
mutations:{
increment (state) { //mutation事件类型接受state作为参数
state.count++
}
}
调用方式如下：
store.commit('increment')
提交载荷(Payload)意思是像state.commit传入额外的参数，大多数情况，载荷应该是一个对象，这样更易读
mutations:{
increment (state, payload){
state.count += payload.amount
}
}
store.commit('increment', {
amount:10
})
//也可以使用对象风格提交mutation：
store.commit({
type: 'increment',
amount: 10
})
注意：mutation只能是同步函数
4. 使用actions
actions使用方法与mutations一样，区别在于action只能是异步函数，而mutations里面只能是同步函数。
actions:{
increment (context) {
context.commit('increment')
}
}
//context是一个与context有相同方法和属性的对象
5. 在组件中使用Vuex
在组件中的调用方法为
state: $store.state.dialog.show
getters: $store.getters.functionname
mutations: $store.commit('switch_dialog')
actions: $store.dispatch('switch_dialog')
不过这种写法又臭又长，更好的做法是使用mapState、mapGetters和mapActions
state：
import { mapState } from 'Vuex'
computed:mapState({
localComputed(){}
//使用对象展开运算符将此对象混入到外埠对象中
...mapState({
show:false
//......
})
})
getters:
import { mapGetters } from 'Vuex'
computed:{
...mapGetters({
'doneTodoCount'
//或者可以给getter属性另取一个名字
doneCount:'doneTodoCount'
})
}
mutations:
import { mapMutations } from 'Vuex'
methods:{
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapMutations` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
}
actions:
import { mapActions } from 'Vuex'
methods:{
...mapActions({
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
// `mapActions` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}