• vue重修之Vuex【下部】


    版权声明

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

    Vuex的模块化

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

    以下是一个简单的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
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 要在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
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    获取Vuex模块内state数据

    • 子模块的状态,会挂到根级别的 state 中,属性名就是模块。
      在这里插入图片描述
    • 使用模块中的数据
    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
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • $store直接访问
    $store.state.user.userInfo.name
    
    • 1
    • mapState辅助函数访问
    ...mapState('user', ['userInfo']),
    ...mapState('setting', ['theme', 'desc']),
    
    • 1
    • 2

    获取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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    获取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']),
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    获取模块内的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)
        }
      }
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • Son1.vue 直接通过store调用
      <button @click="updateUser2">一秒后更新信息</button>
      
      methods:{
          updateUser2 () {
            // 调用action dispatch
            this.$store.dispatch('user/setUserSecond', {
              name: 'xiaohong',
              age: 28
            })
          },
      }
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • Son2.vue mapActions映射
      <button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button>
      
      methods:{
        ...mapActions('user', ['setUserSecond'])
      }
      
      • 1
      • 2
      • 3
      • 4
      • 5

    总结

    类别直接使用模式借助辅助方法使用
    state$store.state.模块名.数据项名…mapState(‘模块名’, [‘数据项’]) 或 …mapState(‘模块名’, { 新的名字: 原来的名字 })
    getters$store.getters[‘模块名/属性名’]…mapGetters(‘模块名’, [‘属性名’]) 或 …mapGetters(‘模块名’, { 新的名字: 原来的名字 })
    mutations$store.commit(‘模块名/方法名’, 其他参数)…mapMutations(‘模块名’, [‘方法名’]) 或 …mapMutations(‘模块名’, { 新的名字: 原来的名字 })
    actions$store.dispatch(‘模块名/方法名’, 其他参数)…mapActions(‘模块名’, [‘方法名’]) 或 …mapActions(‘模块名’, { 新的名字: 原来的名字 })
    组件中使用方式在组件中,使用 $store 对象进行数据和方法的获取在组件中,使用扩展运算符直接调用属性和方法,例如 {{ age }} 或 @click=“updateAge(2)”
  • 相关阅读:
    大数据之Linux(一)
    2022年卡塔尔世界杯黑科技盘点
    ubuntu 20及之后版本添加开机自启服务
    解决 confluent-kafka-go 在windows下未定义的引用 __imp__wassert 错误
    C#进程调用FFmpeg操作音视频
    使用qrcode.js生成二维码
    vue3中父组件与子组件的通信传值
    R语言在气象、水文中数据处理及结果分析、绘图
    C语言入门(三)语句和常用的基本函数
    【已解决】vs2022 编译成功但是疯狂报错E1696找不到源文件
  • 原文地址:https://blog.csdn.net/yang2330648064/article/details/134065118