Vuex -访问（modules）模块中的 state & mutations & actions & getters

文章目录

四大核心复习

在学习我们的 module 模块之前，先对前面的四个核心概念进行一个复习：

一、获取模块内的state数据

1.目标：

掌握模块中 state 的访问语法

尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的 state 中，属性名就是模块名

2.使用模块中的数据

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

modules/user.js

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
}

3.代码示例

1、$store直接访问

js 复制代码

$store.state.user.userInfo.name

2、mapState辅助函数访问（开启命名空间）

js 复制代码

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

二、获取模块内的getters数据

1.目标：

掌握模块中 getters 的访问语

2.语法：

使用模块中 getters 中的数据：

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

3.代码演示

modules/user.js

js 复制代码

const getters = {
  // 分模块后，state指代子模块的state
  UpperCaseName (state) {
    return state.userInfo.name.toUpperCase()
  }
}

Son1.vue 直接访问getters

html 复制代码

<!-- 测试访问模块中的getters - 原生 -->
<div>{{ $store.getters['user/UpperCaseName'] }}</div>

Son2.vue 通过命名空间访问

js 复制代码

computed:{
  ...mapGetters('user', ['UpperCaseName'])
}

三、获取模块内的mutations方法

1.目标：

掌握模块中 mutation 的调用语法

2.注意：

默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

3.调用方式：

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

4.代码实现

modules/user.js

js 复制代码

const mutations = {
  setUser (state, newUserInfo) {
    state.userInfo = newUserInfo
  }
}

modules/setting.js

js 复制代码

const mutations = {
  setTheme (state, newTheme) {
    state.theme = newTheme
  }
}

Son1.vue

js 复制代码

<button @click="updateUser">更新个人信息</button> 
<button @click="updateTheme">更新主题色</button>


export default {
  methods: {
    updateUser () {
      // $store.commit('模块名/mutation名', 额外传参)
      this.$store.commit('user/setUser', {
        name: 'xiaowang',
        age: 25
      })
    }, 
    updateTheme () {
      this.$store.commit('setting/setTheme', 'pink')
    }
  }
}

Son2.vue

js 复制代码

<button @click="setUser({ name: 'xiaoli', age: 80 })">更新个人信息</button>
<button @click="setTheme('skyblue')">更新主题</button>

methods:{
// 分模块的映射
...mapMutations('setting', ['setTheme']),
...mapMutations('user', ['setUser']),
}

四、获取模块内的actions方法

1.目标：

掌握模块中 action 的调用语法 (同理 - 直接类比 mutation 即可)

2.注意：

默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

3.调用语法：

直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)
通过 mapActions 映射
1. 默认根级别的映射 mapActions( $'xxx'$ )
2. 子模块的映射 mapActions('模块名', $'xxx'$ ) - 需要开启命名空间

4.代码实现

需求：

modules/user.js

js 复制代码

const actions = {
  setUserSecond (context, newUserInfo) {
    // 将异步在action中进行封装
    setTimeout(() => {
      // 调用mutation   context上下文，默认提交的就是自己模块的action和mutation
      context.commit('setUser', newUserInfo)
    }, 1000)
  }
}

Son1.vue 直接通过store调用

js 复制代码

<button @click="updateUser2">一秒后更新信息</button>

methods:{
    updateUser2 () {
      // 调用action dispatch
      this.$store.dispatch('user/setUserSecond', {
        name: 'xiaohong',
        age: 28
      })
    },
}

Son2.vue mapActions映射

js 复制代码

<button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button>

methods:{
  ...mapActions('user', ['setUserSecond'])
}

五、vuex模块化小结

1.直接使用

state --> $store.state.模块名.数据项名
getters --> $store.getters $'**模块名**/属性名'$
mutations --> $store.commit('模块名/方法名', 其他参数)
actions --> $store.dispatch('模块名/方法名', 其他参数)

2.借助辅助方法使用

1.import { mapXxxx, mapXxx } from 'vuex'

computed、methods: {

// ...mapState、...mapGetters放computed中；

// ...mapMutations、...mapActions放methods中；

...mapXxxx('模块名', $'数据项\|方法'$ ),

...mapXxxx('模块名', { 新的名字: 原来的名字 }),

}

2.组件中直接使用属性 {``{ age }} 或方法 @click="updateAge(2)"