详解在Vue中如何模块化使用Vuex

// src/store/index.js
 
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    count: 0, // 一个简单的状态示例
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
    decrement(context) {
      context.commit('decrement');
    },
  },
  getters: {
    getCount: state => state.count,
  },
});

// src/components/Counter.vue
 
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>
 
<script>
import { mapState, mapActions } from 'vuex';
 
export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapActions(['increment', 'decrement']),
  },
};
</script>

// userModule.js
const state = {
  user: null,
  userName:"张三"
};
 
const mutations = {
  SET_USER(state, user) {
    state.user = user;
  },
};
 
const actions = {
  setUser({ commit }, user) {
    commit("SET_USER", user);
  },
};
 
export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

// productModule.js
const state = {
  products: [],
  productName:'电脑'
};
 
const mutations = {
  ADD_PRODUCT(state, product) {
    state.products.push(product);
  },
};
 
const actions = {
  addProduct({ commit }, product) {
    commit("ADD_PRODUCT", product);
  },
};
 
export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

// getters.js
export default {
  userName: state => state.user.userName,
  productName: state => state.product.productName,
};

import Vue from 'vue';
import Vuex from 'vuex';
import userModule from './userModule';
import productModule from './productModule';
import getters from './getters'; // 导入 getters 为对象
 
Vue.use(Vuex);
 
const store = new Vuex.Store({
  modules: {
    user: userModule,
    product: productModule,
  },
  getters,
});
 
export default store;

<template>
  <div>
    <h1>User Name: {{ userName }}</h1>
  </div>
</template>
 
<script>
export default {
  computed: {
    userName() {
      return this.$store.getters.userName;
    }
  },
  mounted() {
    this.$store.dispatch("user/setUser", { userName: "John Doe" });
    this.$store.dispatch("product/addProduct", { name: "Product A" });
  },
};
</script>