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>