const store = new Vuex.Store({
state,
getters,
mutations,
actions,
modules
})
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
store,
components: { Counter },
})
核心概念
-
state
作用：
存储数据
state定义：
var state = {}
不使用vuex：
存储需要使用的变量，当多个组件使用时，需要在不同组件中重复引用。
使用vuex：
在vuex对象中写入state对象，并在vue根实例中引入vuex对象，所有子组件都可以访问。
使用方法：
this.$store.state.xx
-
Getters
作用：
定义多组件使用的计算属性
getters定义：
传入state作为第一个参数，可以选其他getters作为第二个参数
var getters = {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
不使用vuex：
当多个组件使用同一个计算属性时，需要在多个组件中定义相同的计算属性。
如：
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
使用vuex：
在vuex对象中写入getters对象，所有子组件中可以使用。
使用方法：
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
-
Mutation
mutation定义：
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)，接受state作为第一个参数，可传入额外的参数。是同步事件不可在事件回调函数中写入异步操作。
var mutations = {
increment (state, n) {
// 变更状态
state.count += n
}
}
作用：
唯一修改store状态的途径是提交mutation中定义的事件，
相当于把state中的数据当成是可访问不可修改的私有变量，而mutation是不可直接调用的公有方法，被当成是事件的形式，需要发射事件触发相应的回调函数。
使用方法：
this.$store.commit('increment', n)
-
Actions
actions定义：
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
var actions = {
increment (context) {
context.commit('increment')
}
}
作用：
actions类似于mutations，不同的是actions提交的是mutation，而不是直接改变状态，并且可以在actions内部写入异步操作。
使用方法：
this.$store.dispatch('increment')
