vue3使用vuex
vue3 创建项目时勾选vuex,会自动生成一个store文件夹自带一个index.jsindex.js:// 引入import { createStore } from "vuex";import axios from 'axios';export default createStore({// 声明变量state: {"name": 'xxxxx',"Adata": null,"Bdata":
·
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>
更多推荐
已为社区贡献8条内容
所有评论(0)