vue3使用vuex

vue3 创建项目时勾选vuex，会自动生成一个store文件夹自带一个index.js

如果构建项目时没勾选vuex，之后在单独安装vuex会报错，因为版本不兼容、这时候就可以用

vue add vue-next

这个命令会把项目中的一些依赖自动升级成支持vue3的版本
单独安装需要自己创建文件夹与文件

index.js：

// 引入
import { createStore } from "vuex";
import axios from 'axios';

export default createStore({
  // 声明变量
  state: {
    "name": 'xxxxx',
    "Adata": null,
    "Bdata": {}
  },
  // 修改变量（state不能直接赋值修改，只能通过mutations）
  mutations: {
    // 参数一：state，参数二：新值
    getname(state, newValue){
      state.name = newValue
    },
    getAData(state, newValue){
      state.Adata = newValue
    },
    getBData(state, newValue){
      state.Bdata = newValue
    }
  },
  // mutations的值由actions传入
  actions: {
	// 参数一：自带属性，参数二：新值
    setName(context, value){
      // 修改getname的值
      context.commit('getname',value)
    },

    getA(context) {
      // 返回一个Promise函数
      return new Promise((reslove,reject)=>{
        // 请求
        axios.get('https://api.apiopen.top/recommendPoetry').then(res=>{
          // 修改getAData的值
          context.commit('getAData',res)
          reslove(res)
        }).catch(res=>{ reject(res) })
      })
    },

    getB(context) {
      return new Promise((reslove,reject)=>{
        axios.get('https://api.apiopen.top/recommendPoetry').then(res=>{
          context.commit('getBData',res)
          reslove(res)
        }).catch(res=>{ reject(res) })
      })
    }

  },
  modules: {},
});

home.vue：

<template>
</template>

<script>
import { computed, onMounted } from "vue";
// 引入vuex
import $store from "../store/index";

export default {
  name: "Home",
  components: {},
  setup(){
    // 获取state.name的值
    let name = computed(()=>{ return $store.state.name });
    let Adata = computed(()=>{ return $store.state.Adata });
    
	// Promise（需要用异步同步来接），async（异步），await （同步）
    async function getBCallback() {
      let getBData = await $store.dispatch('getB');
      return getBData;
    }

    onMounted( async ()=>{
      
      console.log("name",name.value);// 原值
      await $store.dispatch('setName','小明');// 修改
      console.log("name",name.value);// 新值
      
      console.log("Adata",Adata.value)
      await $store.dispatch('getA');
      console.log("Adata",Adata.value.data);

      let getBData = await getBCallback();
      console.log("getBData",getBData);

    })
    return {}
  }
};
</script>