VUEX的基本使用

1：下载  npm i vuex
2:导入
   src/store/index.js
   import Vuex from 'vuex'
3:注册
   import Vue from 'vue'
   Vue.use(Vuex)
4:实例化
   const store =new Vuex.Store({
       state:{
           // 共享的数制
       },
       mutations:{
           
       }，
       actions:{
           
       },
       getters:{
           
       }
   })
5:暴露出去  export default store
6:挂载
   main.js
    import store from '@/store'
    new Vue({
        store
    })

vuex的state,mutations,getters

定义：state:{
    xxx:'张三'
}
使用：this.$store.state.xxx

mapState使用
  1：导入  import {mapState} from 'vuex'
  2:定义：
    computed:{
        ...mapState(['state的属性（xxx）'],{新的名字:'state的属性名'})
    }
  3:使用：
      {{xxx,新的名字}}

定义
mutations:{
    方法名(state,value){
        state.属性名=value
    }
}
使用：this.$store.commit('方法名',实参值)

mapMutations
1：导入  import {mapMutations} from 'vuex'
2:定义
  methods:{
      ...mapMutations(['方法名'])
  }
3:使用 this.方法名（实参值）

getters:{
    方法名(state,getters,rootState,rootGetters){
        return 新的值
    }
}
使用：this.$store.getters.方法名

mapGetters
1：导入  mport {mapGetters} from 'vuex'
2:定义
   computed:{
       ...mapGetters(['方法名'])
   }
  使用：this.方法名

vuex的actions

actions:{
    方法名（store,value）{
     store:{
            state:当前模块的state,
            getters:当前模块的getters
            rootState:根模块的state
            rootGetters:根模块下的getters
            commit:调用mutations的方法
                   调用当前模块的mutations :store.commit('mutations方法名',实参值)
            dispatch:调用actions的方法
                   调用当前模块的actions：store.dispatch('actions方法名',实参值)
     }   
    }
}
mapActions
1：导入  import {mapActions} from 'vuex'
2: 定义
       methods:{
           ...mapActions(['方法名'])
       }
       
 3:使用：
   this.方法名（实参值）

vuex的modules下的actions完整使用

user:{
    actions:{
        refreshUser(store){
            store:{
                state:当前模块的state数据,
                rootState:根模块下的state数据  
                      rootState.模块名.属性名
                commit:调用mutations方法
                      调用本模块的mutations方法： commit('本模块的mutations方法名'，实参值)
                      调用其它模块的mutations方法：commit('模块名/方法名',实参值（没有用null点位）,{root:true})
                dispatch:调用actions方法
                     调用本模块actions方法：dispatch('本模块的actions方法',实参)
                     调用其它模块的actions方法:dispatch('模块名/方法名'，实参（没有用null占位）,{root:true})
                getters:调用getters方法
                       getters.本模块的getters方法名
                rootGetters:调用根模块下的getters方法
                      调用其它模块的getters:rootGetters['模块名/其它模块getters方法']
            }
        }
    }，
    getters:{
        方法名(state,getters,rootState,rootGetters){
                state:当前模块的state数据,
                rootState:根模块下的state数据  
                      rootState.模块名.属性名
                getters:调用getters方法
                       getters.本模块的getters方法名
                rootGetters:调用根模块下的getters方法
                      调用其它模块的getters:rootGetters['模块名/其它模块getters方法']  
        }
    }
},