Vue 学习笔记09:Vuex
一、Vuex 是什么
- 概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
- 什么时候使用 Vuex:
(1)多个组件依赖于同一状态(数据)
(2)来自不同组件的行为需要变更同一状态(数据)
二、搭建 Vuex 环境
- Vue2 只能用 Vuex3,Vue3 只能用 Vuex4,默认安装的是最新版,所以安装时要指定版本为 Vuex3
npm i vuex@3
- 搭建 Vuex 环境
(1)创建文件:src/store/index.js
// 引入Vue核心库
import Vue from 'vue';
// 引入Vuex
import Vuex from 'vuex';
// 应用Vuex插件
Vue.use(Vuex)
// 准备actions对象——响应组件中用户的动作
const actions = {}
// 准备mutations对象——修改state中的数据
const mutations = {}
// 准备state对象——保存具体的数据
const state = { a: 1 }
// 创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
(2)在 main.js
中创建 vm 时传入 store
配置项
import ......
// 引入store
import store from './store'
new Vue({
el: '#app',
render: h => h(App),
store
})
三、基本使用
- 初始化数据、配置 actions、mutations、index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 配置 actions
const actions = {
jia(context, value) {
context.commit("JIA", value);
},
}
// 配置 mutations
const mutations = {
JIA(state, value) {
state.num += value
},
}
// 初始化数据
const state = {
num: 0
}
// 创建并暴露 store
export default new Vuex.Store({
actions,
mutations,
state
})
- 组件中读取 vuex 中的数据:
$store.state.num
- 组件中修改 vuex 中的数据:
$store.dispatch('actions中的方法', 数据)
或$store.commit('mutations中的方法', 数据)
- 备注:若没有网络请求或其他业务逻辑,组件中也可以越过 actions,即不写 dispatch,直接写 commit。
四、getters的使用
- 概念:当 state 中的数据需要经过加工后再使用时,可以使用 getters 加工。
- 在
index.js
中追加getters
配置,getters
必须写返回值。
......
const getters = {
bugSum(state) {
return state.sum * 10;
}
}
// 创建并暴露 store
export default new Vuex.Store({
......
getters
})
- 组件中读取数据:
$store.getters.bugSum
五、四个 map 方法的使用
1. mapState
用于帮助我们映射 state 中的数据为【计算属性】
computed:{
// 借助 mapState 生成计算属性(对象写法)
...mapState({sum:"sum", school:"school", subject:"subject"}),
// 借助 mapState 生成计算属性(数组写法)
...mapState(['sum', 'school', 'subject'])
}
2. mapGetters
用于帮助我们映射 getters 中的数据为【计算属性】
computed:{
// 借助 mapState 生成计算属性(对象写法)
...mapGetters({bigSum:"bigSum"}),
// 借助 mapState 生成计算属性(数组写法)
...mapGetters(['bigSum'])
}
3. mapActions
用于帮助我们生成与 actions 对话的方法,即:包含 $store.dispatch(xxx)
的函数
methods:{
// 借助 mapActions 生成方法(对象写法)
...mapActions({increment:'jiaOdd', decrement:'jiaWait'})
// 借助 mapActions 生成方法(数组写法)
...mapActions(['jiaOdd', 'jiaWait'])
}
4. mapMutations
用于帮助我们生成与 mutations 对话的方法,即:包含 $store.commit(xxx)
的函数
methods:{
// 借助 mapMutations 生成方法(对象写法)
...mapMutations({increment:'JIA', decrement:'JIAN'})
// 借助 mapMutations 生成方法(数组写法)
...mapMutations(['JIA', 'JIAN'])
}
5. 备注
mapActions 和 mapMutations 使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。
六、vuex模块化
1. 编写模块化文件
- 目的:让代码更好维护,让多种数据分类更加明确。
- 在 store 下新增
count.js
和person.js
- 在各自的 js 文件中编写 vuex 配置,在每个 js 文件中都要写入
namespaced: true
配置项以开启命名空间
- 在 index.js 中引入两个模块
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 引入模块
import count from './count'
import person from './person'
// 创建并暴露 store
export default new Vuex.Store({
modules: {
count, person
}
})
2. 获取模块中的数据
下面的符号表示
xxx:vuex模块名
data:vuex模块中的数据
function:与 Actions 通信的 dispatch 方法
value:传给方法的参数(数据)
fname:在组件中给方法取得名字
FUNCTION:与 mutations 通信的 commit 方法
-
开启命名空间后,组件中读取 state 数据:
方式一:自己直接读取this.$store.state.xxx.data
方式二:借助 mapState 读取...mapState("xxx", ["data", ...])
-
开启命名空间后,组件中读取 getters 数据:
方式一:自己直接读取this.$store.getters["xxx/data"]
方式二:借助 mapGetters 读取...mapGetters("xxx", ["data", ...])
-
开启命名空间后,组件中调用 dispatch
方式一:自己直接读取this.$store.dispatch('xxx/function', value)
方式二:借助 mapActions 读取...mapActions("xxx", ["function", ...])
或...mapActions("xxx", {fname:"function", ...})
-
开启命名空间后,组件中调用 commit
方式一:自己直接读取this.$store.commit('xxx/FUNCTION', value)
方式二:借助 mapMutations 读取...mapMutations("xxx", ["FUNCTION", ...])
或...mapMutations("xxx", {fname:"FUNCTION", ...})