一.vuex的作用

1.vue官方搭配,专属,有专门的调试工具
2.数据变化是可预测的(响应式)
3.集中式管理数据状态方案

二.vuex的使用

1.引入vueX

//  ./store.js
    import Vue from 'Vue'
    import Vuex from 'Vuex'
    const store=new Vuex(
    {
        state,
        getters,
        actions,
        mutations,
        moudules:{
         mod1:{ namescpace:true,state,getters,actions,mutations},
         mod2:{ state,getters,actions,mutations}
        }
    }
    )
    export default store
    

2.挂载vuex

//main.js
import store from './store'
new vue({
    el:'#app',
    router,
    store,
    ....
})

3.使用

    this.$store.state.xxx

三.mutations

1.定义

mutations就是vuex对象的methods,他必须是同步函数，state只能通过mutations修改，函数名一般大写为actions的对应函数
( 异步操作通过 Action 来提交 mutation实现，这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。
如果mutation支持异步操作，就没有办法知道状态是何时更新的， 无法很好的进行状态的追踪，给调试带来困难。 )

2.使用

//定义
let mutations={
    SET_NAME(state,value){
        state.name=value
   },
   ...
   
//引用
this.$store.commit('SET_NAME',value)

四.actions

1.定义

actions可以修改vuex状态，可以异步操作

2.使用

//定义

let actions={
    setName({commit},value){
        commit('SET_NAME',value)
   },
  //  {commit,state}=contxt
    setName2(contxt,value){
        contxt.commit('SET_NAME',value)
   },
   ...
   
//引用
this.$store.dispatch('setName',value)

五.getters

1.定义

getters和计算属性类似，组件中一般用getters获取state

2.使用

let getters={
    getName:(state)=>{
        return state.name
}
// 引用
let  name=this.$store.getters.getName

六.store

和vue的data相似

七.mapState，mapMutations,mapActions和mapGetters

www.cnblogs.com/wzx-blog/p/…

1.mapState

(1).基本写法

computed: {
    //借助mapState生成计算属性: sum、school、subject（对象写法) 对象写法可重命名
    ...mapState({sumabc:'sum',thatSchool:'school',subject:'subject'}),
    //借助mapState生成计算属性: sum、 school、subject （数组写法)
    ...mapState(['sum','school','subject'])，
},

(2).命名空间写法

//方式一:自己直接读取
this.$store.state.personAbout. list
//方式二:借助mapState读取:
...mapState('countAbout', ['sum','school','subject']),

2.mapMutations

(1).基本写法

methods:{
    //靠mapActions生成:increment、decrement（对象形式)
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    //靠mapMutations生成:JIA、JIAN（对象形式)
    ...mapMutations(['JIA','JIAN']),
}

(2).命名空间写法

//方式一:自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二:借助mapMutations:
...mapMutations('countAbout' ,{increment:'JIA', decrement:'JIAN'})，

3.mapActions

(1).基本写法

methods:{
    //靠mapActions生成: incrementOdd、 incrementWait（对象形式)
    ...mapActions({incrementOdd :'jiaOdd' ,incrementwait:'jiaWait'})
    //靠mapActions生成: incrementOdd、 incrementWait（数组形式)
    ...mapActions([ 'jiaOdd','jiaWait'])
}

(2).命名空间写法

//方式一:自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二:借助mapActions:
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiawait'})

4.mapGetters

(1).基本写法

computed: {
    //借助mapGetters生成计算属性: bigSum（对象写法)
    ...mapGetters({bigSum:'bigSum'}),   
    //借助mapGetters生成计算属性: bigSum（数组写法)
    ...mapGetters(['bigsum'])
},

(2).命名空间写法

//方式一:自己直接读取
this.$store.getters ['personAbout/firstPersonName']
//方式二:借助mapGetters读取;
...mapGetters('countAbout',['bigSum'])