Vue3 uses vuex module to divide stepping pit records

 

 First create a folder store under src. Create an index.ts file under the store (used to import other module files under modules) and a modules folder (store the store for each functional module)

Contents of index.ts

import { createStore } from "vuex";
import login from './modules/login'
const store = createStore({
  modules: {
    login
  },
});
export default store

Create a login.ts file under modules to store login-related information

Then I use in vue file

import { useStore } from 'vuex'
const store = useStore()
store.commit('login/setLoginToken', true)

It is found that an error has been reported unknown mutation type: login/setLoginToken

Later, I found that I was blind and copied the format of login.ts directly like this

import { createStore } from "vuex";
const store = createStore({
  state: {
    login_token: null
  },
  getters: {},
  mutations: {
    setLoginToken(state, token: Boolean) {
        console.log(token)
        state.login_token = token
    }
  },
  actions: {},
  modules: {},
});
export default store

The correct one should look like this

const login = {
  state: {
    login_token: null
  },
  getters: {},
  mutations: {
    setLoginToken(state, token: Boolean) {
        console.log(token)
        state.login_token = token
    }
  },
  actions: {},
  modules: {},
};
export default login

Error still reported after modification

It was found that the namespace was not enabled

const login = {
  namespaced: true,  //命名
  state: {
    login_token: null
  },
  getters: {},
  mutations: {
    setLoginToken(state, token: Boolean) {
        console.log(token)
        state.login_token = token
    }
  },
  actions: {},
  modules: {},
};
export default login

Writing code needs to be careful~