Vue3中Vuex的使用【优秀代码review】

1.把需要用到的变量名单独抽一个js文件

// getter-types.js
// getter时使用

export const USER_INFO = "USER_INFO";
export const ERROR_STATE = "ERROR_STATE";
export const AUTH_SDK = "AUTH_SDK";
export const LOADING = "LOADING";

// mutation-type.js
// mutation时使用

export const SET_USER_INFO = "SET_USER_INFO";
export const SET_ERROR_STATE = "SET_ERROR_STATE";
export const SET_AUTH_SDK = "SET_AUTH_SDK";
export const SET_LOADING_STATE = "SET_LOADING_STATE";

2.Store里面的index.js

首先从变量名js文件中导入需要的名字，然后在getter和mutation里面对state数据做对应处理

import {
  MAP_INFO,
  USER_INFO,
  AUTH_SDK,
  ERROR_STATE,
  LOADING,
} from "../getter-types";
import {
  SET_MAP_INFO,
  SET_TOKEN,
  SET_LOCATION,
  SET_SEARCH_QUERY,
} from "../mutation-types";

export default {
  state: {
    userInfo: {
      userName: "",
      userId: "",
    },
    token: "",
    authSdk: undefined,
    loading: false,
    message: {
      switch: false,
      info: "",
    },
    location: [],
    searchQuery: {},
    mapInfo: {
      map: '',
    }
  },
  getters: {
    [MAP_INFO]: (state) => state.mapInfo,
    [USER_INFO]: (state) => state.userInfo,
    [AUTH_SDK]: (state) => state.authSdk,
    [ERROR_STATE]: (state) => state.errorState,
    [LOADING]: (state) => state.loading,
  },
  mutations: {
    [SET_MAP_INFO](state, data) {
      state.mapInfo.map = data.map
    },
    [SET_SEARCH_QUERY](state, data) {
      state.searchQuery = data;
    },
    [SET_LOCATION](state, data) {
      state.location = data;
    },
    [SET_TOKEN](state, data) {
      state.token = data;
    },
  },
};

3.其他Vue文件使用

首先从store中导入需要的变量，之后通过getter获取数据,通过commit修改数据（同步数据）

import { SET_MAP_INFO } from '@store/mutation-types'
import { MAP_INFO } from '@store/getter-types';
import store from '@/store'
const { commit, getters } = store

//  使用
let storeMap = getters[MAP_INFO].map     // 获取数据
commit(SET_MAP_INFO, { map: storeMap })    // 修改数据