vue3中vuex是怎么配置呢?
1.下载
npm install vuex@next
2.创建store文件夹并添加index.js
import {
createStore} from "vuex";
const store = createStore({
state() {
return {
storeCount: 1
}
},
getters: {
double(state) {
return state.storeCount * 2
}
},
mutations: {
add(state, plyLoad) {
state.storeCount += plyLoad
}
},
actions: {
asyncAdd({
commit}, playLoad) {
// 模拟网路数据
setTimeout(() => {
commit('add', playLoad)
}, 1000)
}
}
})
export default store; //暴露store对象
3.来到main.js --- createApp 和以前 一样
import store from "./store";
createApp(App).use(store).mount('#app');
4.来到你自己页面
<script setup>
import {
useStore} from "vuex"
let store = useStore();
// 获取strore中的值
let storeCount = computed(() => store.state.storeCount);
// 同步修改
function modifyStoreData() {
store.commit('add', 5);
}
// 异步修改 需要dispatch
function modifyAsyncStoreData() {
store.dispatch('asyncAdd', 1);
}
</script>
vue3-vuex的使用
猜你喜欢
转载自blog.csdn.net/weixin_45932463/article/details/121363139
今日推荐
周排行