VUEX 的核心概念 1 、State （常用）；2、Getters ；3、Mutations（常用）；4、Actions ；5、Modules；
1。State是唯一的数据源，单一的状态树
const Couter={
template:`<div>{{count}}</div>`,
computed:{
count(){
return this.$store.state.count
}
}
}
2。通过Getters可以派生出新的状态 如：
const store=new Vuex.Store({
state:{
todos:[
{ id:1,text:'...',done:true },
{ id:2,text:'...',done:false }
]
},
getters:{
doneTodos: srtate =>{
return state.todos.filter(todo=>todo.done)
}
}
})
3。更改Vuex的store中的状态的唯一方法是提交mutation
const store=new Vuex.Store({
state:{
count:1
},
mutations:{
increment(state){ //改变状态
state.count++
}
}
})
//调用
store.commit('increment')
4。Action提交的是mutation，而不是直接改变状态，Action可以包含任意的异步操作
const store=new Vuex.Store({
state:{
count:0
},
mutations:{
increment(state){
state.count++
}
},
actions:{
increment(context){
context.commit('increment')
}
}
})
5。面对复杂的应用程序，当管理的状态比较多时，我们需要将Vuex的store对象分割成模块（modules）
const moduleA={
state:{ ...},
mutations:{ ...},
actions:{ ...},
getters:{ ...}
}
const moduleB={
state:{ ...},
mutations:{ ...},
actions:{ ...}
}
const stote=new Vuex.Store({
modules:{
a:moduleA,
b:moduleB
}
})
项目结构
|——index.html
|——main.js
|——api
|_ ... //抽取出api请求
|——components
|-App.vue
|_ ...
|——store
|-index.js //我们组装模块并导出store的地方
|-actions.js //根级别的actions
|-mutations.js //根级别的mutations
|_modules
|-cart.js ///购物车模块
|_products.js ///产品模块
