Vuex 状态机
一、概念
Vuex,是 Vue 官方推出的“状态管理模式”。
“状态”,实际上指的就是数据。主要用于管理项目中的公共数据。
二、五大核心属性
state
:保存公共数据;getters
:保存从 state 中衍生出来的数据,作用类似于组件中的 computed;mutations
:保存修改 state 的方法;actions
:保存公共的异步方法;modules
:将一个仓库拆分成多个模块;
三、vuex使用
- 安装 vuex, 与vue-router类似,vuex是一个独立存在的插件,如果脚手架初始化没有选 vuex,就需要额外安装。
npm i vuex@3.4.0
- 新建 store/index.js 专门存放 vuex
- 为了维护项目目录的整洁,在src目录下新建一个store目录其下放置一个index.js文件。 (和 router/index.js 类似)
- 创建仓库 store/index.js
// 导入 vue import Vue from 'vue' // 导入 vuex import Vuex from 'vuex' // vuex也是vue的插件, 需要use一下, 进行插件的安装初始化 Vue.use(Vuex) // 创建仓库 store const store = new Vuex.Store() // 导出仓库 export default store
- 在 main.js 中导入挂载到 Vue 实例上
import Vue from 'vue' import App from './App.vue' import store from './store' Vue.config.productionTip = false new Vue({ render: h => h(App), store }).$mount('#app')
四、state 的使用
-
state
1、保存数据
export default new Vuex.Store({
state: {
userInfo: {
username: "张三",
},
},
2、组件获取数据
<p>
{{$store.state.userInfo.username}}
</p>
<script>
export default {
computed:{
username(){
return this.$store.state.userInfo.username
}
}
}
</script>
五、getters 的使用
1、设置 getters
里面都是方法,每个方法第一个参数都是state,拿到 state 只能用不能改
export default {
getters: {
username(state) {
return state.userInfo.username;
},
},
}
2、组件获取 getters
<p>
{{$store.getters.username}}
</p>
六、mutations 的使用
mutations 用来设置修改 state 的方法,这些方法都只能是同步方法。
推荐用纯大写
state 是自带的,payload 是外部传进来的值
1、设置 mutations 方法
export default {
mutations: {
SET_USER_INFO(state, payload) {
state.userInfo = payload;
},
},
}
2、调用 mutations 方法
created() {
this.$store.commit('SET_USER_INFO',{username:"李四"});
},
注意:mutations 的方法是唯一
修改 state 的方法。
七、actions 的使用
1、设置 actions 方法
export default new Vuex.Store({
actions: {
async getMajorsAsync(context, payload) {
const res = await api.majors.get();
console.log(res);
}
}
})
2、调用 actions方法
this.$store.dispatch('getMajorsAsync');
3、处理请求结果
在 actions 方法中请求到的 结果,有两种方法:
- 将数据保存到 state;
- 将数据通过 return 返回;
(1)、将数据保存在 state
export default new Vuex.Store({
state: {
majors: []
},
mutations: {
SET_MAJORS(state, payload) {
state.majors = payload.rows;
}
},
actions: {
// context 代表拿到的整个仓库对象 ; payload 为接收的外部传递的参数,需要就传不需要就不传
async getMajorsAsync(context, payload) {
const res = await api.majors.get();
if (res.code) {
// 调用 mutations 的方法
context.commit('SET_MAJORS', res.data);
}
}
}
})
说明:因为 Vuex 中只能通过 mutations 去修改 state,因此,如果要将 actions 中的数据保存到 state,必须在 actions 中调用 mutation 的方法
八、modules 模块化
模块化,就是对仓库中的数据进行分类管理
1、创建模块的目录
src
|---store
| |---modules
| | |---majors.js #专业模块
| | |---classes.js #班级模块
| | |---students.js #学生模块
| | |--- ...
| |---index.js #主仓库
2、配置模块
import api from '@/api';
export default {
namespaced: true, // 解决命名空间冲突
state: {
majors: []
},
mutations: {
SET_MAJORS(state, payload) {
state.majors = payload.rows;
}
},
actions: {
async getMajorsAsync(context, payload) {
const res = await api.majors.get();
if (res.code) {
// 调用 mutations 的方法
context.commit('SET_MAJORS', res.data);
}
}
}
}
3、主仓库引入模块
import majors from './modules/majors.js'
export default new Vuex.Store({
modules: {
majorsModule: majors
}
})
4、组件中操作模块
(1)、获取模块 state
this.$store.state.模块名.数据名
(2)、调用模块 actions
this.$store.dispatch('模块名/方法名')
(3)、获取模块 getters
this.$store.getters['模块名/方法名']
(4)、获取模块mutation
this.$store.commit('模块名/方法名')