什么是Vuex?
Vuex是一个专门为Vue.js应用设计的状态管理模式。它提供了一种可预测的状态管理方式，可以将Vue组件中的共享状态抽离出来，集中到一个全局的状态管理器中进行管理。通俗点讲，就是Vuex可以帮助你更好的管理你的Vue项目中的数据，让你的数据更加可控和易于维护。
Vuex的运用场景
-
面向大型单页面应用，存在复杂的组件关系或异步数据流。
-
需要实现多个组件或视图之间的状态共享和交互。
-
需要方便地跟踪、监测、调试和记录应用的状态变化和执行日志。
-
应用数据流比较复杂，需要统一的状态管理机制，以保证数据的完整性和一致性。
-
需要实现应用状态和数据的持久化存储、恢复和管理等。
安装Vuex
在创建Vue项目时,选择Vuex选项,会自动安装并且配置上Vuex插件
使用辅助函数时都需要引入对应函数
import {map方法名} from 'vuex'1. 状态数据 state
state指的是整个应用的共享状态数据，等同于应用程序中的全局变量。
声明数据
在 store/index.js 中声明
export default new Vuex.Store({
//状态数据，要共享的数据必须放在这里
state: {
username: '六思逸',
age: 23,
},
})访问数据
第一步：在计算属性中获取数据
方法一：直接使用 vuex 里面的数据
computed:{
username(){
return this.$store.state.username;
},
age(){
return this.$store.state.age;
}
}方法二：通过辅助函数使用 vuex里面的数据
数组方式
computed:{
...mapState(['username', 'age']),
}对象方式，可以取别名
computed:{
...mapState({
un: state=>state.username,
age: state=>state.age,
}),
}第二步：在页面模板中使用数据
<template>
<div>
<h1>状态数据 state</h1>
<h1>{{un}}</h1>
<h1>{{age}} 岁</h1>
</div>
</template>2.修改数据 mutations
mutations用于修改state中的状态数据。它类似于事件管理器，并提供了一种命名的方式来描述事物的状态变化。
声明mutations方法
在 src/store/index.js 找到 mutations 里面写方法，是唯一可以修改vuex数据的方式.
年龄累加函数
mutations: {
add(state, payload) {
state.age += payload;
},
},提交mutations修改数据
调用提交mutations有两种方式：直接提交 和 辅助函数
直接提交
methods:{
add(n){
this.$store.commit('add', n);
},
}辅助函数
methods:{
// 数组方式
...mapMutations(['add']),
// 对象方式，可以取别名
...mapMutations({
add: 'add',
}),
}3.数据二次处理 getters
getters用于对state中的数据进行二次处理或计算，它类似于Vue中的计算属性，可以基于一些已有的state计算出派生出新的状态，以供组件使用。
声明二次处理函数
getters: {
showName(state) {
if (state.age >= 18) {
return '姓名：' + state.username;
} else {
return '姓名：' + state.username + '（未成年）';
}
},
},使用getters二次处理函数
直接使用getters二次处理方法
export default {
computed:{
showName(){
return this.$store.getters.showName;
},
}
}辅助函数调用getters
export default {
computed:{
// 数组方式
...mapGetters(['showName']),
// 对象方式，可以取别名
...mapGetters({
username:'showName',
})
}
}4.异步修改数据 actions
actions用于处理异步操作，或者在mutations中不能直接实现的复杂操作，比如API请求、异步操作、封装成段的mutations等。
声明异步修改数据函数
actions: {
asyncAdd(context, payload) {
//1秒以后再提交修改
setTimeout(() => {
context.commit('add', payload);
}, 1000);
},
},使用actions方法
直接调用actions的方法
methods:{
add(n){
this.$store.dispatch('asyncAdd', n)
},
}辅助函数调用actions
methods:{
// 数组方式
...mapActions(['asyncAdd', 'asyncReduce']),
// 对象方式，可以取别名
...mapActions({
add:'asyncAdd',
})
}5. 多模块 modules
modules用于将各个功能模块分离开来，使得状态管理更加模块化，每个模块管理自己独立的状态数据mutations、actions、getters等。
分模块
A模块
modules: {
moduleA: {
namespaced: true, //启用命名空间
state: {
username: '杜甫',
age: 20,
},
mutations: {
//修改模块A的年龄
add(state, payload) {
state.age += payload;
}
},
getters: {},
actions: {},
},
}B模块
modules: {
moduleB: {
namespaced: true, //启用命名空间
state: {
username: '王维',
age: 28,
},
mutations: {
//修改模块B的年龄
add(state, payload) {
state.age += payload;
}
},
getters: {},
actions: {},
}
}分模块读数据
computed:{
//访问模块A的数据
usernameA(){
return this.$store.state.moduleA.username;
},
ageA(){
return this.$store.state.moduleA.age;
},
//访问模块B的数据
usernameB(){
return this.$store.state.moduleB.username;
},
ageB(){
return this.$store.state.moduleB.age;
},
},分模块修改数据
注意：必须开启命名空间
methods:{
//修改模块A的年龄
addA(){
this.$store.commit('moduleA/add', 1);
},
//修改模块B的年龄
addB(){
this.$store.commit('moduleB/add', 2);
}
}