淺析Vue3中vuex的基本使用、模塊化及如何使用mapState/mapGetters和mapActions

一、vuex的基本使用

1、vuex 的基本結構及基本使用：src/store/index.js 中，代碼如下

// vue3中創建store實例對象的方法createStore()按需引入
import { createStore } from 'vuex' export default createStore({ state: { info: 'hello' }, getters: { // 定義一個getters
 formatInfo (state) { return state.info + ' Tom' } }, mutations: { // 定義mutations，用於修改狀態(同步)
 updateInfo (state, payload) { state.info = payload } }, actions: { // 定義actions，用於修改狀態(異步) // 2秒后更新狀態
 updateInfo (context, payload) { setTimeout(() => { context.commit('updateInfo', payload) }, 2000) } }, modules: { } })

2、組件模板中和 script 中  - 對store中數據的操作與使用

<template>
  <div>測試組件</div>
  <hr>
  // 頁面中直接使用渲染時，與vue2中的使用方法相同
  <div>獲取Store中的state、getters: {{$store.getters.formatInfo}}</div>
</template>

<script>
// 按需引入useStore()方法
import { useStore } from 'vuex' export default { setup () { // Vue3中store類似於Vue2中this.$store - this.$store.state.info // useStore()方法創建store對象，相當於src/store/index.js中的store實例對象
    const store = useStore() console.log(store.state.info) // hello // 修改info的值
    const handleClick = () => { // 觸發mutations，用於同步修改state的信息 // store.commit('updateInfo', 'nihao') // 觸發actions，用於異步修改state的信息
      store.dispatch('updateInfo', 'hi') } return { handleClick } } } </script>

二、將store中的數據模塊化后的使用

1、模塊化

　　基於原 index.js 代碼進行改造拆分，假設有兩個模塊 global（全局的） 和 user（局部的），新建 src/store/modules/global.js 、src/store/modules/user.js 文件。

// 拆分后代碼如下（src/store/modules/global.js） // 全局store, 存放全局使用共享的數據
export default { // 注意：全局模塊中不需要開啟命名空間
 state: {}, mutations: {}, actions: {}, getters: {} } // 拆分后代碼如下（src/store/modules/user.js） // 用戶信息模塊(局部模塊)
export default { namespaced: true, // 開啟命名空間
 state () { return { // 用戶信息對象 
 profile: { id: '', nickname: 'yee' } } }, mutations: { // 定義mutations，用於同步修改狀態
 updateNickname (state, payload) { state.profile.nickname = payload } }, actions: { // 定義actions，用於異步修改狀態 // 2秒后更新狀態
 updateNickname (context, payload) { setTimeout(() => { context.commit('updateNickname', payload) }, 2000) } }, getters: { // 定義一個getters
 formatNickname (state) { return 'Hi ' + state.profile.nickname } } }

　　拆分后代碼如下（src/store/index.js）：全局模塊是解構，局部模塊是放到 modules 里

import { createStore } from 'vuex'
// 全局模塊
import global from './modules/global'
// 局部模塊
import user from './modules/user' export default createStore({ // 全局模塊
  ...global, // 局部模塊
 modules: { user } })

2、組件中對模塊化后的store中數據的操作與使用

// 組件模板中獲取
<div>獲取Store中user模塊的getters: {{$store.getters['user/formatNickname']}}</div>

// 組件 script 中獲取
import { useStore } from 'vuex' export default { setup () { // Vue3中store類似於Vue2中this.$store
    const store = useStore() console.log(store.state.user.profile.nickname) // 修改nickname的值
    const handleClick = () => { // 觸發mutations，用於同步修改user模塊state的信息
      store.dispatch('user/updateNickname', 'Yee') } return { handleClick } } }

三、vue3.0下如何使用mapState，mapGetters和mapActions

　　可以看這篇文章：https://blog.csdn.net/qq_16139383/article/details/119935755 和 https://blog.csdn.net/weixin_45389051/article/details/118639403