vue重修之Vuex【下部】

r囧r小猫 2024-02-20 09:02 18阅读 0赞

#### 文章目录 ####

*  版权声明
 *  Vuex的模块化
 *  获取Vuex模块内state数据
 *  获取Vuex模块内getters数据
 *  获取Vuex模块内mutations方法
 *  获取模块内的actions方法
 *  总结

*  本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明，所有版权属于黑马程序员或相关权利人所有。本博客的目的仅为个人学习和交流之用，并非商业用途。
 *  我在整理学习笔记的过程中尽力确保准确性，但无法保证内容的完整性和时效性。本博客的内容可能会随着时间的推移而过时或需要更新。
 *  若您是黑马程序员或相关权利人，如有任何侵犯版权的地方，请您及时联系我，我将立即予以删除或进行必要的修改。
 *  对于其他读者，请在阅读本博客内容时保持遵守相关法律法规和道德准则，谨慎参考，并自行承担因此产生的风险和责任。本博客中的部分观点和意见仅代表我个人，不代表黑马程序员的立场。

## Vuex的模块化 ##

*  Vuex是Vue.js应用程序的状态管理库。Vuex模块是一个独立的部分，它封装了自己的状态（state）、变更（mutations）、动作（actions）和获取器（getters）。通过定义一个包含模块状态、变更、动作和获取器的对象来创建Vuex模块。然后，可以将该对象传递给Vuex存储的`modules`选项以注册该模块。  
    ![在这里插入图片描述][e22e33a6c33c421bb445bd80dcbc5e57.png]

以下是一个简单的Vuex模块示例：

// module.js
    const module = {
        
      state: {
        
        count: 0
      },
      mutations: {
        
        increment(state) {
        
          state.count++
        }
      },
      actions: {
        
        incrementAsync({
          commit }) {
        
          setTimeout(() => {
        
            commit('increment')
          }, 1000)
        }
      },
      getters: {
        
        doubleCount(state) {
        
          return state.count * 2
        }
      }
    }
    
    export default module

*  要在Vuex存储中使用此模块，可以导入它并将其添加到`modules`选项中：

import Vue from 'vue'
    import Vuex from 'vuex'
    import module from './module'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
        
      modules: {
        
        module
      }
    })
    
    export default store

## 获取Vuex模块内state数据 ##

*  子模块的状态，会挂到根级别的 state 中，属性名就是模块。  
    ![在这里插入图片描述][3456e4b649fb4eea89bfe035b67838ae.png]
 *  使用模块中的数据

1.  直接通过模块名访问 $store.state.模块名.xxx
2.  通过 mapState 映射：
    
    1.  默认根级别的映射 mapState(\[ ‘xxx’ \])
    2.  子模块的映射 ：mapState(‘模块名’, \[‘xxx’\]) - 需要开启命名空间 **namespaced:true**

*  `modules/user.js`

const state = {
        
      userInfo: {
        
        name: 'zs',
        age: 18
      },
      myMsg: '我的数据'
    }
    
    const mutations = {
        
      updateMsg (state, msg) {
        
        state.myMsg = msg
      }
    }
    
    const actions = {
        }
    
    const getters = {
        }
    
    export default {
        
      namespaced: true,
      state,
      mutations,
      actions,
      getters
    }

*  $store直接访问

$store.state.user.userInfo.name

*  mapState辅助函数访问

...mapState('user', ['userInfo']),
    ...mapState('setting', ['theme', 'desc']),

## 获取Vuex模块内getters数据 ##

*  `mapGetters` 函数用于从模块中映射 getters 到局部计算属性。它接收一个字符串数组和/或对象。
 *  字符串数组中的每个项都是 getter 名称，对象中的每个键是局部计算属性名称，值是 getter 名称。

使用模块中 getters 中的数据：

1.  直接通过模块名访问`$store.getters['模块名/xxx ']`
2.  通过 mapGetters 映射
    
    1.  默认根级别的映射 `mapGetters([ 'xxx' ])`
    2.  子模块的映射 `mapGetters('模块名', ['xxx'])` \- 需要开启命名空间：**namespaced:true**

以下是一个使用 `mapGetters` 的示例：

<template>
      <div>
        <p>count: {
        {
        doubleCount}}</p>
      </div>
    </template>
    
    <script>
    import {
         mapGetters } from 'vuex'
    
    export default {
        
      computed: {
        
        // 从名为 `module` 的 store 模块中映射 `doubleCount` getter
        ...mapGetters('module', ['doubleCount'])
      }
    }
    </script>

## 获取Vuex模块内mutations方法 ##

*  调用方式：

1.  直接通过 store 调用 `$store.commit('模块名/xxx ', 额外参数)`
2.  通过 `mapMutations` 映射
    
    1.  默认根级别的映射 `mapMutations([ 'xxx' ])`
    2.  子模块的映射 `mapMutations('模块名', ['xxx'])` \- 需要开启命名空间:**namespaced:true**

<button @click="setUser({ name: 'xiaoli', age: 80 })">更新个人信息</button>
    <button @click="setTheme('skyblue')">更新主题</button>
    
    methods:{
        
    // 分模块的映射
    ...mapMutations('setting', ['setTheme']),
    ...mapMutations('user', ['setUser']),
    }

## 获取模块内的actions方法 ##

*  默认模块中的 mutation 和 actions 会被挂载到全局，**需要开启命名空间**，才会挂载到子模块。
 *  mapActions 函数用于从模块中映射 actions 到局部方法。
 *  字符串数组中的每个项都是 action 名称，对象中的每个键是局部方法名称，值是 action 名称。
 *  需求：实现一秒后更新信息
    
     *  `modules/user.js`
    
        const actions = {
              
          setUserSecond (context, newUserInfo) {
              
            // 将异步方法在action中进行封装
            setTimeout(() => {
              
              // 调用mutation   context上下文，默认提交的就是自己模块的action和mutation
              context.commit('setUser', newUserInfo)
            }, 1000)
          }
        }
    
     *  Son1.vue 直接通过store调用
    
        <button @click="updateUser2">一秒后更新信息</button>
        
        methods:{
              
            updateUser2 () {
              
              // 调用action dispatch
              this.$store.dispatch('user/setUserSecond', {
              
                name: 'xiaohong',
                age: 28
              })
            },
        }
    
     *  Son2.vue mapActions映射
    
        <button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button>
        
        methods:{
              
          ...mapActions('user', ['setUserSecond'])
        }

## 总结 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">类别</th> 
   <th align="left">直接使用模式</th> 
   <th align="center">借助辅助方法使用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">state</td> 
   <td align="left">$store.state.模块名.数据项名</td> 
   <td align="center">…mapState(‘模块名’, [‘数据项’]) 或 …mapState(‘模块名’, { 新的名字: 原来的名字 })</td> 
  </tr> 
  <tr> 
   <td align="left">getters</td> 
   <td align="left">$store.getters[‘模块名/属性名’]</td> 
   <td align="center">…mapGetters(‘模块名’, [‘属性名’]) 或 …mapGetters(‘模块名’, { 新的名字: 原来的名字 })</td> 
  </tr> 
  <tr> 
   <td align="left">mutations</td> 
   <td align="left">$store.commit(‘模块名/方法名’, 其他参数)</td> 
   <td align="center">…mapMutations(‘模块名’, [‘方法名’]) 或 …mapMutations(‘模块名’, { 新的名字: 原来的名字 })</td> 
  </tr> 
  <tr> 
   <td align="left">actions</td> 
   <td align="left">$store.dispatch(‘模块名/方法名’, 其他参数)</td> 
   <td align="center">…mapActions(‘模块名’, [‘方法名’]) 或 …mapActions(‘模块名’, { 新的名字: 原来的名字 })</td> 
  </tr> 
  <tr> 
   <td align="left">组件中使用方式</td> 
   <td align="left">在组件中，使用 $store 对象进行数据和方法的获取</td> 
   <td align="center">在组件中，使用扩展运算符直接调用属性和方法，例如 { { age }} 或 @click=“updateAge(2)”</td> 
  </tr> 
 </tbody> 
</table>

[e22e33a6c33c421bb445bd80dcbc5e57.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/03f2ac9e25e2426393183be5c777dd79.png
[3456e4b649fb4eea89bfe035b67838ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/b0b9c985095d4cd89b95904473ff488c.png