VUE3的学习和使用（二）vuex+ts的使用

Vuex 是专门为 Vue.js 设计的状态管理库，用于管理共享状态。如：

多个视图依赖于同一状态，或者来自不同视图的行为需要变更同一状态。

vue3中对vuex的使用写法

首先在main.ts中引入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: {},
};
// 标红色的值命名最好和文件名一致
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>