vuex module 模块化

2019-07-26  本文已影响0人  醉笙情丶浮生梦

store.js

import Vue from "vue";
import Vuex from "vuex";
import vxUser from "./modules/user";
Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    vxUser
  }
});

user.js

const state = {
  token: false
};

const mutations = {
  setToken: (state, token) => {
    state.token = token;
  }
};

export default {
  namespaced: true,
  state,
  mutations
};

import {mapState, mapActions, mapMutations, mapGetters}

computed: {
  // 使用对象展开运算符将此对象混入到外部对象中
  // ...mapState({
  //   count: state => state.vxUser.token,
  //   token: "token"
  // })

  // 此写法需打开命名空间
  ...mapState("vxUser", {
    count: state => state.token
  })
},

methods: {
  ...mapMutations("vxUser", {
    amend: "setToken" // 将 `this.add()` 映射为 `this.$store.commit('increment')`
  })
}

参考:vuex 的 mapState mapActions mapMutations mapGetters 在模块 module 使用详解

上一篇 下一篇

猜你喜欢

热点阅读