vue3中使用vuex
一、使用習慣1(模塊化):
1、文件目錄:

2、userStore.ts
import { Module } from 'vuex';
// import {setStorage,getStorage} from "../../util/common";
export default {
namespaced: true,
state: {
userInfo: { }
},
getters: {
// 類似計算屬性,必需return
handleUserInfo: (state) => {
return state.userInfo.age = 20;
}
},
actions: {
// 異步過程,調用mutations中方法改變state
asyncUpdateUserInfo(store, newData) { // 第一個參數是vuex固定的參數,不需要手動去傳遞
store.commit("updateUserInfo", newData)
},
},
mutations: {
// 改變state
updateUserInfo(state, newData: { }) {
state.menuList = newData;
}
}
} as Module<any, any>;
3、vue文件中使用
(1)state(使用數據)
<template>{{ userInfo.name }}</template>
import { useStore } from 'vuex';
const store = useStore();
const { userInfo } = toRefs(store.state.userStore);
(2)mutations(常規改變數據狀態)=> commit -> mutations
import { useStore } from "vuex"
const store = useStore()
const changeStoreUserInfo = () => {
store.commit("userStore/updateUserInfo", {name: '小明'})
}
(3)actions(異步改變數據狀態)=> dispach -> mutations
import { useStore } from "vuex"
const store = useStore()
const asyncChangeStore = () => {
setTimeout(() => {
store.dispatch("userStore/asyncUpdateUserInfo", {name: '小李'})
}, 1000)
(4)getters(類似計算屬性,需return)
如文件 2、userStore.ts 中 getters。
二、使用習慣2(無模塊化):
文件目錄

本文來自博客園,作者:RHCHIK,轉載請注明原文鏈接:http://www.rzrgm.cn/suihung/p/17007758.html

浙公網安備 33010602011771號