vuex modules

叁歲伎倆 2021-07-24 15:28 351阅读 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>