vuex modules

   export default new Vuex.Store({
      //存储数据
      state:{

      },
      //方法
      mutations:{

      },
      //计算属性
      getters:{

      },
      //异步方法,(如ajax)
      actions:{

      },
      //模块
      modules:{
		可以存放其他store
			格式为:
			
			(1)名称:{state:{xx},mutations:{xx},getters:{xx},actions:{xx}}
			
			若为mod文件
			(1)文件中export default{state:{xx},mutations:{xx},getters:{xx},actions:{xx}}
			
			在组件中调用:
			第一种:
			state:	$store.state.模块名.键名
			getters:$store.getters['方法名')
			actions:$store.dispatch('方法名')
			mutations:$store.commit('方法名')
			
			(1)引入辅助函数
			 import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
			获取模块内的
			state:computed:{...mapState(['模块名'])}; 模块名.键名调用
			getters:computed:{...mapGetters(['函数名',...])}
			mutations:computed:{...mapMutations(['函数名',...])}
			actions:methods:{...mapActions(['函数名',...])}
      }
    })

代码示例:
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>

发布了550 篇原创文章 · 获赞 3 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/104635626