Vuex 是专门为 Vue.js 设计的状态管理库，用于管理共享状态。如：
多个视图依赖于同一状态，或者来自不同视图的行为需要变更同一状态。
vue3中对vuex的使用写法
首先在main.ts中引入store
引入store
在src的目录下创建store用于放置vuex文件,在index.ts中引入
import { createStore, } from 'vuex';
import modules from './modules';
import actions from './global/actions';
import getters from './global/getters';
import mutations from './global/mutations';
// 全局引入的类型
import state, { RootStateType, } from './global/state';
export default createStore<RootStateType>({
state,
mutations,
actions,
getters,
modules,
});
在store目录下新建login.ts用于存储登录的信息
import axios from 'axios';
import { Module, } from 'vuex';
import { RootStateType, } from '@/store/global/state';
/**
* 初始化state里的数据值
*/
const initState = {
userInfo: {},
};
// login的命名最好和文件名一致
const login: Module<RootStateType> = {
namespaced: true,
state: {
...initState,
},
mutations: {
/**
* mutations里的方法用于修改state的值，
* state为原本state的值，param为变化的值
* 需要注意的是mutations里面的方法是同步的，通过commit调用
*/
setUserInfo (state, param) {
state.userInfo = param;
},
},
actions: {
/**
* actions中一般是接口调用方法或者需要异步操作的函数方法
* 第一个参数是调用方法，参数params是接口的入参
* 异步操作时通过dispatch调用
*/
onLogin ({ commit, }, params) {
axios.post(`xxxxxx`, params)
.then(({ data, }) => { if (data.code === 200) {
// 调用mutations的方法修改state值
commit('setUserInfo', data.data); }
})
},
},
getters: {
// getters中的方法对state值进行计算，暂时用到的比较少
},
};
export default login;
在pages目录下的login.vue文件中调用值和接口
<script setup lang="ts">
import { useStore, } from 'vuex';
import { computed，} from 'vue';
const store = useStore();
// 通过computed取state里的值，可以监听数据变化
const userInfo = computed(() => store.state.login.userInfo);
// 监听数据变化还可以时用userInfo, 第一个参数为要监听的值
watch(userInfo,(newValue,oldValue) => {
...
});
// 调用actions的方法，第一个参数login对应store文件名
// onLogin对应函数名，第二个参数为修改的值
store.dispatch('login/onLogin', params);
// 调用mutations的方法，参数同上
store.commit('login/setUserInfo', params) ;
</script>
