本文中的部分示例需有前两文的阅读基础,还没读过的同学先复习一下噢,直达链接:
【Vue | 补洞 | 01】Vuex 环境搭建及基本使用
【Vue | 补洞 | 02】mapState 一行代码获取 vuex 所有数据
vuex
通过namespaced
进行模块化编程!在大型项目中,把所有的数据都堆放在一个仓库里总不是好事;好在这个仓库里提供了一些收纳盒
,每个收纳盒存放独立的数据和逻辑,代码干净,方便维护!
欢迎持续关注新系列文章 [Vue 补洞] 系列,用久了 Vue2 总有一些遗漏的知识点,通过该系列文章一起查漏补缺!
实现组件间通信的另外两种方式,建议阅读!
【Vue | 补洞 | 04】全局事件总线
【Vue | 补洞 | 05】消息订阅与发布
将 store/index.js
修改成如下示例
modules
去接收相关模块应声明命名空间
,用于调用时指明要操作的模块import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
// 人员相关
const personAbout = {
namespaced: 'personAbout',
state: { ... },
actions: { ... },
mutations: { ... },
getters: { ... },
}
// 科目相关
const projectAbout = {
// namespaced 命名空间
namespaced: 'projectAbout',
state: { ... },
actions: { ... },
mutations: { ... },
getters: { ... },
}
export default new Vuex.Store({
modules: {
personAbout,
projectAbout,
},
})
// store/index.js
...
const personAbout = {
namespaced: 'personAbout',
state: {
userName: 'Jokerls',
age: 18,
address: '潮州'
}
...
}
<template>
<div>
<h2>用户名:{{ userName }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>户籍:{{ address }}</h2>
</div>
</template>
<script>
export default {
computed: {
userName () {
return this.$store.state.personAbout.userName
},
age () {
return this.$store.state.personAbout.age
},
address () {
return this.$store.state.personAbout.address
}
}
}
</script>
mapState
写法)<template>
<div>
<h2>用户名:{{ userName }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>户籍:{{ address }}</h2>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
// 1.对象写法
...mapState('personAbout', {
userName: 'userName',
age: 'age',
address: 'address',
})
// 2.数组写法
// ...mapState('personAbout', ['userName', 'age', 'address'])
}
}
</script>
假设 actions 处理一个逻辑:点击按钮,age 为 25岁前可加1,之后就不允许加
// 人员相关
const personAbout = {
namespaced: 'personAbout',
actions: {
addAgeBefore25(context, value) {
if (value < 25) {
context.commit('ADD_AGE', value)
}
},
},
mutations: {
ADD_AGE(state) {
state.age += 1
},
}
}
使用(基础写法)
注意:需通过 personAbout/addAgeBefore25
去指定哪个调用哪个命名空间下的 actions
<template>
<div>
<button @click="addAge">添加年龄</button>
<h2>用户名:{{ userName }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>户籍:{{ address }}</h2>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState('personAbout', ['userName', 'age', 'address'])
},
methods: {
addAge () {
this.$store.dispatch('personAbout/addAgeBefore25', this.age)
}
}
}
</script>
mapMutations
写法)<template>
<div>
<button @click="addAgeBefore25(age)">添加年龄</button>
<h2>用户名:{{ userName }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>户籍:{{ address }}</h2>
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
computed: {
...mapState('personAbout', ['userName', 'age', 'address'])
},
methods: {
// 1.对象写法
...mapActions('personAbout', { addAgeBefore25: 'addAgeBefore25' })
// 2.数组写法
// ...mapActions('personAbout', ['addAgeBefore25'])
}
}
</script>
// 人员相关
const personAbout = {
namespaced: 'personAbout',
...
mutations: {
ADD_AGE(state, value) {
state.age += 1
},
}
...
}
<template>
<div>
<button @click="addAggWithCommit">添加年龄</button>
<h2>用户名:{{ userName }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>户籍:{{ address }}</h2>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState('personAbout', ['userName', 'age', 'address'])
},
methods: {
addAggWithCommit () {
this.$store.commit('personAbout/ADD_AGE', this.age)
}
}
}
</script>
mapActions
写法)<template>
<div>
<button @click="ADD_AGE(age)">添加年龄</button>
<h2>用户名:{{ userName }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>户籍:{{ address }}</h2>
</div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
export default {
computed: {
...mapState('personAbout', ['userName', 'age', 'address'])
},
methods: {
// 1.对象写法
...mapMutations('personAbout', { ADD_AGE: 'ADD_AGE' })
// 2.数组写法
// ...mapMutations('personAbout', ['ADD_AGE'])
}
}
</script>
假设用
getters
实现将用户名名称拼为:Jokerls乐乐
// 人员相关
const personAbout = {
namespaced: 'personAbout',
...
state: {
userName: 'Jokerls',
age: 18,
address: '潮州',
},
getters: {
userFullName(state) {
return state.userName + '乐乐'
},
}
...
}
<template>
<div>
<h2>用户名:{{ userName }}</h2>
<h2>用户全名:{{ userFullName }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>户籍:{{ address }}</h2>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState('personAbout', ['userName', 'age', 'address']),
userFullName () {
return this.$store.getters['personAbout/userFullName']
}
}
}
</script>
mapGetters
写法)<template>
<div>
<h2>用户名:{{ userName }}</h2>
<h2>用户全名:{{ userFullName }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>户籍:{{ address }}</h2>
</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
export default {
computed: {
...mapState('personAbout', ['userName', 'age', 'address']),
// 1.对象写法
...mapGetters('personAbout', { userFullName: 'userFullName' })
// 2.数组写法
// ...mapGetters('personAbout', ['userFullName'])
}
}
</script>
store/index.js
中,使用 modules
做模块化编码personAbout/xxx
才能读取到对应的命名空间下的值或方法mapXxxx
写法,则需在 第一个参数 配置命名空间的值,如 mapXxxx('personAbout', [])