Detailed explanation of how to use Vuex modularly in Vue

Normal use

// src/store/
 
import Vue from 'vue';
import Vuex from 'vuex';
 
(Vuex);
 
export default new ({
  state: {
    count: 0, // A simple state example  },
  mutations: {
    increment(state) {
      ++;
    },
    decrement(state) {
      --;
    },
  },
  actions: {
    increment(context) {
      ('increment');
    },
    decrement(context) {
      ('decrement');
    },
  },
  getters: {
    getCount: state =&gt; ,
  },
});

Use Vuex in components:In components that need to access or modify the state, you can use helper functions provided by Vuex.

// src/components/
 
<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>

Modular use

advantage

In small personal projects, there is no problem not using modularity, but modular management is required in companies or large projects. Modularity is conducive to maintainability, team collaboration, clear code structure, and improved readability.

Suppose you have two modules, one for managing user information and the other for managing product information.

First, create two Vuex module files separately:

Module File

// 
const state = {
  user: null,
  userName:"Zhang San"
};
 
const mutations = {
  SET_USER(state, user) {
     = user;
  },
};
 
const actions = {
  setUser({ commit }, user) {
    commit("SET_USER", user);
  },
};
 
export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

// 
const state = {
  products: [],
  productName:'computer'
};
 
const mutations = {
  ADD_PRODUCT(state, product) {
    (product);
  },
};
 
const actions = {
  addProduct({ commit }, product) {
    commit("ADD_PRODUCT", product);
  },
};
 
export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

Concentrate the status of the module into Getters, which is convenient for use on the page

Create Getters in the root level Vuex Store to centralize the state data for all modules:

// 
export default {
  userName: state => ,
  productName: state => ,
};

Create a root-level Vuex Store file, introduce and register the above modules:

import Vue from 'vue';
import Vuex from 'vuex';
import userModule from './userModule';
import productModule from './productModule';
import getters from './getters'; // Import getters as an object 
(Vuex);
 
const store = new ({
  modules: {
    user: userModule,
    product: productModule,
  },
  getters,
});
 
export default store;

Page usage

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

This is the end of this article about how to use Vuex in Vue in detail. For more related content on Vue modular use of Vuex, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!