Vuex modules 模块化简单例子

main.js

import Vue from "vue";
import App from "./App.vue";
import store from "./vuex/store";
import Vuex from "vuex";
Vue.use(Vuex);

Vue.config.productionTip = false;

new Vue({
  store, //从跟组件注入`Vuex.Store`
  render: h => h(App)
}).$mount("#app");

store.js

import Vue from "vue";
import Vuex from "vuex";
import app from "./modules/app";
import getters from "./getters";

Vue.use(Vuex);

export default new Vuex.Store(
  modules: { app },//暴露的模块 -> 可以访问方法 `actions/mutations`
  getters //暴露的state -> 可以访问属性 `this.sysCode`
});

app.js

export default {
  namespaced: true,
  state: {
    sysUser: {},
    sysCode: { aaa: "111", bbb: "222" }
  },

  mutations: { //同步方法代替构造器
    setSysUser(state, user) {
      state.sysUser = user;
    },
    setSysCode(state, code) {
      state.sysCode = code;
    }
  },

  actions: { //异步方法->外部使用的方法
    userLoad(context, code) {
      context.commit("setSysUser", code);//间接调用mutations
    },
    codeLoad({ commit }, code) {
      commit("setSysCode", code);
    }
  }
};

getters.js

export default {
  // namespaced = true -> 使用全局路径
  sysUser: state => state.app.sysUser,
  sysCode: state => state.app.sysCode
};

App.vuex

<template>
  <div>
    <Count></Count>
  </div>
</template>

<script>
import Count from "@/components/count.vue";
export default {
  components: { Count }
};
</script>

<style>
</style>

count.vue

<template>
  <div>
    <h3>{{sysUser.name}}</h3>
    <h3>{{sysUser.age}}</h3>
    
    <button @click="refresh">手动刷新</button>


 <!-- `mapGetters` 引入的state-->
    <h3>{{sysCode.aaa}}</h3>
    <h3>{{sysCode.bbb}}</h3>
  </div>
</template>
<script>
// 引入辅助函数
import { mapState, mapGetters } from "vuex";
export default {
  // 计算属性 每次值发生改变则重新计算 并更新DOM
  computed: {
    //通过`store.js` 的`getters`暴露出的属性
    ...mapGetters(["sysUser", "sysCode"])
  },

  //方法
  methods: {
    datas() {
      return { name: "6", age: 16 }; //从后台取得
    },
    //刷新
    refresh() {
      this.$store.dispatch("app/userLoad", this.datas()); //将`dtas`返回的值调用`store`的`userLoad`方法
    }
  }
};
</script>

转载于:https://my.oschina.net/u/3886184/blog/1921798