状态管理-vuex

1. state

   state：{
   nameProps：1
   }
   //获取 computed
   1.1 方法一
   this.$store.state.namePropsthis.$store.state.modeulA.nameProps
   1.2 方法二
   mapState({
   nameProps:state=>state.nameProps
   nameProps:state=>state.modeulA.nameProps
   })
   1.3 方法三
   mapState([
   ‘nameProps’ //非modlue中的state
   ])

2. getters

   gettters:{
   nameProps:state=>{
   return state.nameProps
   }
   }

   //获取值 computed
   2.1 方法一
   mapGetters([
   nameProps
   ])
   2.2 方法二
   this.$store.getter.nameProps

3. modules

   在主文件index.js里注入,结构和主文件相同
   modules：{modulesA}

4. mutations

   functionProps(state,param){
   //param也可为object
   state.nameProps=param
   }
   使用方法 methods

   4.1 方法一
   this.$store.commit(functionProps,param)this.$store.commit({
   type:‘functionProps’,
   param:param
   })

   4.2 方法二
   mapMutations([
   ‘functionProps’
   ]),

   this.functionProps(param)
   

5. action
   //异步
   functionProps({commit,state,dispatch},param){
   api(param).then(res=>{
   const {code,data}=res
   commit(‘functionMutProps’,data) //调用mutations方法设置值
   dispatch(‘functionProps1’,data ) // 调用action其他方法
   state //获取state值子模块多rootState,可获取index.js文件state值 {commit,state,rootState,dispatch}
   }).catch(e=>{
   })
   }

   //同步

   async functionProps1({commit,state,dispatch},param){
   try{
   const res= await api()
   const {code,data}=res
   commit(‘functionMutProps’,data) //调用mutations方法设置值
   dispatch(‘functionProps1’,data ) // 调用action其他方法
   state //获取state值子模块多rootState,可获取index.js文件state值 {commit,state,rootState,dispatch}
   }.catch(e){}

   }

   //使用方法 methods
   5.1 方法一
   mapActions([
   ‘functionProps’,
   ‘functionProps1’
   ])

   this.functionProps(param)
   

   5.2 方法二
   this.$store.dispatch(‘functionProps’,param)

6. plugins：避免刷新文件后数据丢失
   //index.js文件注入
   plugins:[pluginsProps]

   //使用方法
   创建js文件
   export default store=>{
   if (localStorage.state) store.replaceState(JSON.parse(localStorage.state))
   store.subscribe((mutations, state) => {
   localStorage.state = JSON.stringify(state)
   })
   }

7. vuex和双向绑定

   computed：{
   inputValue:{
   get(){
   //获取值
   return this.$store.state.nameProps
   },
   set(val){
   //inputValue改变后改变state里面的缓存值
   this.functionMulProps(val) //通过mapMutatios注册后使用
   }
   }
   }