vuex 基本语法

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  ///产品模块