[JavaScript知识库]Vuex简单用法（vue3.0）

主要是vue3中对vuex的用法，因为我平时是能不用就不用，但没想到还是得用，哎。
官方地址：Vuex
以下为vue3中vuex的用法：

store/index.js写法：

import { createStore } from 'vuex'
import axios from "@/api/axios.js";
export default createStore({
  state: {
    errorLog: [],//存储日志
    userInfo: {},//用户信息
  },
   // 修改变量（state不能直接赋值修改，只能通过mutations）
  mutations: {
    addAxiosError(state, item) {// 参数一：state，参数二：新值
      state.errorLog.push(item)
      console.log('打印错误日志：', state);
    },
    getUserInfo(state, item) {
      state.userInfo = item;
    },
  },
  actions: {
    setLogs(context, value) { //使用方法：$store.dispatch('setLogs',value);
      context.commit('addAxiosError', value)
    },
    submitErrors(context) {
      return new Promise((reslove, reject) => {
        axios.get('地址').then(res => {
          context.commit('addAxiosError', res);//提交到mutations中的方法使用
          reslove(res)
        }).catch(res => { reject(res) })
      })
    },
    async getUserInfo (context) {
      await axios
        .get("xxxx请求地址")
        .then(function (response) {
          if (response.data.IsSuccess) {
            let res = response.data.Data
            // me.$router.user2 = res;
            context.commit('getUserInfo', res)
          } else {
            console.log(response.data.errorMessage);
          }
        });
    },
  },
  getters: {
  }
})

在main.js中注册全局：

import { createApp } from "vue";
import $store from "./store";

const app = createApp(App);
app.use($store);
app.mount("#app");

在组件中使用：

只能使用actions中的方法影响mutations

$store.dispatch('setLogs',value);
如果是异步方法加上 
async ()=>{
     await me.$store.dispatch('getUserInfo');
} 
使用数据：
$store.state.xxx;//仅可使用 不可修改 或使用上放actions中的方法修改

参考文章：https://blog.csdn.net/weixin_45936690/article/details/115456564