vuex - Module - 访问命名空间里的state、actions、mutations、getters的方式
- 1. vuex
- 1.1. 作用
- 1.2. 成员及作用
- 2. 模块（module）说明
- 3. 要点及注意点
- 3.1. namespaced: true
- 3.2. 辅助函数写在哪里?
- 4. 演示代码概览
- 5. state
- 5.1. 全局变量获取和辅助函数获取
- 5.2. 代码总结
- 5.3. 实际开发的中主模块中使用getters-快捷访问
- 6. actions
- 6.1. 全局变量获取和辅助函数获取
- 6.2. 代码总结及操作演示
- 7. mutations
- 7.1 全局变量和辅助函数获取
- 7.2 代码总结
- 8. getters
- 8.1 全局变量获取和辅助函数获取
- 8.2. 代码总结
vuex_1">1. vuex
1.1. 作用
- 用来统一管理项目的状态(公用数据)
1.2. 成员及作用
- state: 存储状态
- getters: state的计算属性
- mutations: 修改状态(同步操作)
- actions:修改状态(异步操作)
- modules: 数据模块化
2. 模块（module）说明
注: 本小节内容来源官网
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
const moduleA = {
namespaced: true, //区分和其他模块及主模块中的内容,防止冲突
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
namespaced: true, //区分和其他模块及主模块中的内容,防止冲突
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
虽然模块化的引入, 有利于vuex中对状态和函数的维护和开发, 但与之带来的还有获取上的困扰, 以下内容为获取各配置项中内容的讲解.
3. 要点及注意点
3.1. namespaced: true
- 保证内部模块的高封闭性;
- 默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的, 可以直接调用, 但是很容易和其他子模块及主模块中, 同名状态或者函数发生冲突, 在子模块的配置项目中, 必须添加
namespaced: true属性, 区分和其他模块及主模块中的同名状态或者函数, 防止冲突; - 后面需要访问子模块中的内容就需要带模块名.
3.2. 辅助函数写在哪里?
- 针对于各配置项, 共有四个辅助函数, 用于访问命名空间里的内容, mapState, mapMutations, mapActions, mapGetters,
mapState, mapGetters, 中存的是状态(数据), 因此在子组件的计算属性computed中使用;mapMutations, mapActions中存的是函数, 因此在子组件的methods使用;
4. 演示代码概览
- user子模块不做获取演示, 仅仅为了体现子模块
5. state
- 获取order子模块中的 price:'998’
5.1. 全局变量获取和辅助函数获取
- 全局变量之 - 插值表达式获取
- 格式:
$store.state.模块名.模块属性 - 实现代码: $store.state.order.price
- 格式:
- 全局变量之 - 计算属性获取
- 和上一个相同, 仅仅写在计算属性中, 前面加一个
this - 实现代码: this.$store.state.模块名.模块属性
- 和上一个相同, 仅仅写在计算属性中, 前面加一个
- 辅助函数 - 数组形式
- 格式:
...mapState('模块名', ['属性名']) - 实现代码: …mapState(‘order’, [‘price’])
- 格式:
5.2. 代码总结
<template>
<div>
<h1>modules</h1>
<pre>
<!-- 获取order中的价格 "998" -->
1.1 全局变量之 - 插值表达式获取
{{ $store.state.order.price }}
1.2 全局变量之 - 计算属性获取
{{ myPrice }}
1.3. 辅助函数之-数组形式
{{ price }}
</pre>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'modules',
computed: {
myPrice(){
return this.$store.state.order.price
},
...mapState('order', ['price'])
}
}
</script>
5.3. 实际开发的中主模块中使用getters-快捷访问
实际开发中, 以上方式较少用, 一般来说子模块中state里的数据, 都会在主模块中的getters写好, 方便获取
6. actions
6.1. 全局变量获取和辅助函数获取
-
全局变量获取
- 格式:
this.$store.dispatch('模块名/actions中的方法名', '实参') - this.$store.dispatch(‘order/editTxt’, ‘跳楼大甩卖’)
- 格式:
-
赋值函数 - 数组形式
-
格式:
methods:{ // 获取方法 ...mapActions(['模块名/actions中的方法名']) // 调用 this['模块名/actions中的方法名'](实参) } -
代码实现
methods:{ ...mapActions(['order/editTxt']), this['order/editTxt']('优惠大酬宾') }
-
-
赋值函数 - 对象形式
-
格式:
methods:{ ...mapActions({ aaa: '模块名/actions中的方法名' }), // 调用 this.aaa(实参) } -
代码实现
methods:{ ...mapActions({ aaa: 'order/editTxt' }), this.aaa('大大促销') }
-
6.2. 代码总结及操作演示
- vuex子模块中定义:
const state = {
price:'998',
num:9999,
desc:{
txt:'便宜实惠!'
}
}
const actions = {
editTxt(context, payload){
context.commit("editTxt", payload)
},
}
const mutations = {
editTxt(state, payload){
state.desc.txt = payload
}
}
const getters = {}
export default {
namespaced: true,
state,
actions,
mutations,
getters
}
- 组件中使用:
<template>
<div>
<h1>modules</h1>
<pre>
3.actions <br>
desc: {{ $store.state.order.desc.txt }}
<button @click=clk1>
把desc'便宜实惠!'改成'大大促销'
</button>
<button @click=clk2>
把desc'便宜实惠!'改成'跳楼大甩卖'
</button>
<button @click=clk3>
把desc'便宜实惠!'改成'优惠大酬宾'
</button> </pre>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions({
aaa: 'order/editTxt'
}),
clk1 () {
this.aaa('大大促销')
},
clk2 () {
this.$store.dispatch('order/editTxt', '跳楼大甩卖')
},
...mapActions(['order/editTxt']),
clk3 () {
this['order/editTxt']('优惠大酬宾')
}
}
}
</script>
操作演示:
7. mutations
7.1 全局变量和辅助函数获取
-
全局变量获取
- 格式:
this.$store.commit('模块名/actions中的方法名', '实参') - this.$store.commit(‘order/editTxt’, ‘跳楼大甩卖’)
- 格式:
-
辅助函数获取
mutations的辅助函数是mapMutations, 辅助函数的使用方式和actions一致, 不做赘述
7.2 代码总结
- vuex子模块中定义:
const state = {
price:'998',
num:9999,
desc:{
txt:'便宜实惠!'
}
}
const actions = {}
const mutations = {
editNum(state, payload){
state.num = payload
}
}
const getters = {}
export default {
namespaced: true,
state,
actions,
mutations,
getters
}
- 组件中使用:
<template>
<div>
<h1>modules</h1>
<pre>
mutations
num9999 --> {{$store.state.order.num}}
1.全局变量
<button @click=clk1>把num'9999'改成'1111'</button>
2.辅助函数-对象
<button @click=clk2>把num'9999'改成'2222'</button>
2.辅助函数-数组
<button @click="clk3 ">把'9999'改成'3333'</button>
</pre>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations({
ccc: 'order/editNum',
}),
...mapMutations(['order/editNum']),
clk1(){
this.$store.commit('order/editNum',1111)
},
clk2(){
this.ccc(2222)
},
clk3(){
this['order/editNum'](3333)
}
}
}
</script>
8. getters
注意:
- vuex中的getter , 可以认为是 store 的计算属性 。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
- 实际开发中, 并不会使用子模块的getters, 因为它的存在本来就是给开发者提供快捷访问, 简化编码, 只有写在主模块中才能满足设计getters的出发点。
8.1 全局变量获取和辅助函数获取
-
全局变量获取
1. 格式:$store.getters['模块名/getters中的属性名']
2. 代码实现: $store.getters[‘order/customTxt’] -
辅助函数获取
1. 格式:computed: { ...mapGetters({ myTxt: '模块名/getters中的属性名 }), }
8.2. 代码总结
- vuex子模块中定义
const state = {
price:'998',
num:9999,
desc:{
txt:'便宜实惠!'
}
}
const actions = {}
const mutations = {}
const getters = {
customTxt(state){
return state.desc.txt
}
}
export default {
namespaced: true,
state,
actions,
mutations,
getters
}
- 组件中使用
<template>
<div>
<h1>modules</h1>
<pre>
desc:便宜实惠! --> {{$store.state.order.desc.txt}}
getters
方式一:全局变量 {{ $store.getters['order/customTxt'] }}
方式一:辅助函数 {{ myTxt }}
</pre>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters({
myTxt: 'order/customTxt'
}),
}
}
</script>
