一、使用習慣1（模塊化）：

1、文件目錄：

2、userStore.ts

import { Module } from 'vuex';
// import {setStorage,getStorage} from "../../util/common";

export default {
  namespaced: true,
  state: {
    userInfo: { }
  },
  getters: {
    // 類似計算屬性，必需return
    handleUserInfo: (state) => {
        return state.userInfo.age = 20;
    }
  },
  actions: {
    // 異步過程，調用mutations中方法改變state
    asyncUpdateUserInfo(store, newData) { // 第一個參數是vuex固定的參數，不需要手動去傳遞
    store.commit("updateUserInfo", newData)
  },
  },
  mutations: {
    // 改變state
    updateUserInfo(state, newData: { }) {
      state.menuList = newData;
    }
  }
} as Module<any, any>;

3、vue文件中使用

（1）state（使用數據）

<template>{{ userInfo.name }}</template>

import { useStore } from 'vuex';
const store = useStore();
const { userInfo } = toRefs(store.state.userStore);

（2）mutations（常規改變數據狀態）=> commit -> mutations

import { useStore } from "vuex"

const store = useStore()

const changeStoreUserInfo = () => {
  store.commit("userStore/updateUserInfo", {name: '小明'})
}

 （3）actions（異步改變數據狀態）=> dispach -> mutations

import { useStore } from "vuex"

const store = useStore()

const asyncChangeStore = () => {
   setTimeout(() => {
   store.dispatch("userStore/asyncUpdateUserInfo", {name: '小李'})
}, 1000)

 （4）getters（類似計算屬性，需return）

如文件 2、userStore.ts 中 getters。

二、使用習慣2（無模塊化）：

文件目錄