vuex modules-蒲公英云

vuex modules

叁歲伎倆 2021-07-24 15:28 463阅读 0赞

export default new Vuex.Store({
      //存储数据
      state:{
      },
      //方法
      mutations:{
      },
      //计算属性
      getters:{
      },
      //异步方法,(如ajax)
      actions:{
      },
      //模块
      modules:{
        可以存放其他store
            格式为:
            (1)名称:{state:{xx},mutations:{xx},getters:{xx},actions:{xx}}
                    其中:
                        模块的actions.js函数中
                            function({rootState}){xxx}  可以使用rootState访问根结点的state
                        模块的getters.js函数中
                            function({state, getters, rootState}){xxx}  第三个参使访问根节点的state
            若为mod文件
            (1)文件中export default{state:{xx},mutations:{xx},getters:{xx},actions:{xx}}
            在组件中调用:
        不使用命名空间(即模块还有一个属性:namespaced: true,)；
                第一种:
                state:    $store.state.模块名.键名
                getters:$store.getters('方法名')    
                actions:$store.dispatch('方法名')
                mutations:$store.commit('方法名')
                (1)引入辅助函数
                 import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
                获取模块内的
                state:computed:{...mapState(['模块名'])}; 模块名.键名调用
                    或者采用带有命名空间的state写法
                getters:computed:{...mapGetters(['函数名',...])}
                mutations:methods:{...mapMutations(['函数名',...])}
                actions:methods:{...mapActions(['函数名',...])}
        使用命名空间(即模块还有一个属性:namespaced: true,)；
            方式一:    
                调用基础上加上当前模块名
                     如调用mutations:this.$store.commit('当前模块名/方法名')
                辅助函数
                getters:computed:{...mapGetters('模块名',['模块的函数名',...])}
                mutations:methods:{...mapMutations('模块名',['函数名',...])}
                actions:methods:{...mapActions('模块名',['函数名',...])}
                state:computed:{...mapState({
                    模块中的state属性名:state=>state.模块名.state属性名    
                })}; 
            方式二:
                import { createNamespacedHelpers } from 'vuex'
                const { mapState, mapActions,xx } = createNamespacedHelpers('模块名')
                辅助函数
                getters:computed:{...mapGetters(['模块的函数名',...])}
                mutations:methods:{...mapMutations(['函数名',...])}
                actions:methods:{...mapActions(['函数名',...])}
                state:computed:{...mapState(['属性名'])}
      }
    })

代码示例:
store:

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import mod1 from './mod1'
Vue.use(Vuex);
//仓库对象,存放多组件共用数据
export default new Vuex.Store({ 
  //data
  state:state,
  //methods,尽量在这里处理state中的状态
  mutations:mutations,
  //计算属性
  getters:getters,
  //异步方法(如ajax)
  actions:actions,
  //模块
  modules:{ 
    mod1
  }
})

mod1:

export default{ 
  state:{ 
    productNum:10
  },
  getters:{ 
    brief:function(state){ 
      return state.productNum+'件衣服';
    }
  },
  actions:{ 
    changeProNum(content){ 
      setTimeout(()=>{ 
        content.commit('addProNum');
      },1000)
     }
  },
  mutations:{ 
    addProNum(state){ 
      return state.productNum++;
    }
  }
}

组件:

<template>
  <div>
  <h1>{ { $store.state.mod1.productNum}}</h1>
  <h2>{ { mod1.productNum}}</h2>
   <h3>{ { brief}}</h3>
    <h4>{ { addProNum}}</h4>
  <button @click='changeProNum'>点击获取</button>
  </div>
</template>
<script>
  import { mapState,mapActions,mapGetters,mapMutations} from 'vuex'
  //获取模块state内容
  let mapStateObj=mapState(['mod1'])
  //获取模块getters内容
  let mapGettersObj=mapGetters(['brief'])
  let mapMutationsObj=mapMutations(['addProNum'])
  let mapActionsObj=mapActions(['changeProNum']);
  export default{ 
    name:'A',
    data()
    { 
      return{ 
         count:0
      }
    },
    methods:{ 
    },
    computed:{ 
        ...mapStateObj,
        ...mapGettersObj,
        ...mapMutationsObj,
    },
    mounted()
    { 
      console.log(this);
    },
    methods:{ 
      ...mapActionsObj
    }
  }
</script>
<style>
</style>