vuex模块的简单使用以及五大方法的调用方式

vuex一般在vue2项目中使用的较多，我们在项目较大的时候一般都是会选择去使用vuex来作为全局的状态管理机，话不多说，直接上结构代码

下面我贴出一个模块的代码，其余一样的

//user.js模块
export default{
 namespaced: true,//namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接
  state:{...},
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

然后在store下的index.js引入各个模块

import Vue from 'vue';
import Vuex	from 'vuex';
// 模块
import common from './modules/common';
import user	from './modules/user';
import chat	from './modules/chat';
import cart from './modules/cart';
import cart_supplier from './modules/cart_supplier';
import statistics from './modules/statistics';
import update from './modules/update';

Vue.use(Vuex);

const store = new Vuex.Store({
	modules: {
		chat, // 即时通讯
		common, // 系统初始化
		user, // 用户中心
		cart, // 购物车
		cart_supplier,//供应链购物车
		statistics, // 系统更新
		update // 系统更新
	}
});

export default store;

最后记得在main.js离引入和挂载

import store from './store';
Vue.prototype.$store = store;//挂载在 Vue 实例上
onst app = new Vue({
	store,
	...App
})
app.$mount()

在页面的具体使用，此处只哪state和Action做列子，Getter和mutation和这两个类似

1.state

直接使用方式：
this.$store.state.模块名称.模块属性
this.💲store.state.app.user.name
辅助函数mapState

computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })

如果我们定义的计算属性的名称与 state 的子节点名称相同时，也可以这样直接写

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

还可以使用解构的方式

...mapState('user', ['count', 'name']) // user 模块名称，后面的数组是user模块的state的方法名

2.actions

直接使用的方式

/*
* 1、以载荷形式分发
* this.$store.dispatch('模块名/方法',传参)
* 
* 2、以对象形式分发
* this.$store.dispatch({
* 	type:'模块名/方法',
* 	传参
* })
*/ 
this.$store.dispatch("app/updateUser",{ name: "嘻嘻", age: 11, sex: "女" }); //app为模块名，不写默认为根（即默认为index.js中的）
this.$store.dispatch({
     type: "app/updateUser",
     user: { name: "憨憨", age: 11, sex: "女" },
});

方式二：辅助函数mapActions

...mapActions({ updateUser: "模块名/方法" }), //注意此处的updateUser是我们在页面调用的方法名哦，调用这个即是调用模块的方法
//使用数组方式
...mapActions([
    "方法名",
])

！注意，以上的使用都是需要在vue页面引入辅助函数的如下

import { mapState, mapActions,mapGetters,mapMutations } from 'vuex';

补充鸭个小机识，引入模块的时候，如果你觉得每个辅助函数都要引入模块路径觉得麻烦的话，可以试试createNamespacedHelpers方法创建基于某个命名空间辅助函数，它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

好了，溜咯，后会有期啦