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>
