本文深入解析Vue.js官方状态管理库Vuex的核心机制。详细阐述State、Getters、Mutations、Actions及Modules五大概念的定义与用法，并通过完整代码示例演示如何在Vue项目中配置Store、处理同步异步数据流。此外，针对页面刷新导致数据丢失的问题，提供了基于浏览器本地存储的持久化解决方案，帮助开发者构建可维护的大型前端应用。
Vuex
Vuex 是专为 Vue.js 应用程序设计的全局状态管理方案。虽然父子组件间的数据传递相对直接，但在处理兄弟组件通信，尤其是涉及多层嵌套结构的复杂场景时，传统的传值方式会变得极其繁琐。此时，引入 Vuex 来集中管理共享状态或数据，成为解决此类问题的有效手段。
Vuex 的核心架构由五个关键概念组成。
1. State：用于定义应用的全局状态数据，其作用类似于组件中的 data。在页面中访问这些定义的数据时，需通过特定的方式获取：
this.$store.state.变量名Getters：类似于 Vue 中的计算属性（computed），具备缓存机制，仅当依赖的 state 数据发生变化时才会重新计算。Getters 中的方法接收一个 state 对象作为参数。
如：
state:{
count: 1
},
getters:{
getCount(state) {
return state.count + 1
}
},在页面中获取 Getters 的值：
this.$store.getters.getCount
<h2>{{this.$store.getters.getCount}}</h2>Mutations：这是修改 State 值的唯一合法途径，且必须执行同步操作。
在页面中触发 Mutations 的方式：
this.$store.commit("方法名")
//可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
store.commit('increment', 10)
// ...
mutations: {
increment (state, n) {
state.count += n
}
}Actions：用于提交 Mutations 而非直接变更状态，支持执行任意异步操作。
Modules：模块机制。Vuex 允许将 Store 分割为多个模块，每个模块拥有独立的 State、Getters、Mutations 和 Actions，甚至支持嵌套模块。这种设计能有效避免变量名冲突导致的程序错误。
const moduleA = {
state: {},
mutations: {},
actions: {},
getters: {}
}
const moduleB = {
state: {},
mutations: {},
actions: {},
getters: {}
}
export default new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
// 在各自的模块内部使用
state.price // 这种使用方式和单个使用方式一样，直接使用就行
//在组件中使用
store.state.a.price // 先找到模块的名字，再去调用属性
store.state.b.price // 先找到模块的名字，再去调用属性使用
安装 Vuex
npm install --save vuex
配置 Vuex
在 src 文件夹下新建一个 store 文件夹，并在其中添加 index.js 文件。
随后在 main.js 中引入 store 目录下的 index.js 文件。
// main.js内部对vuex的配置
import store from '@/store/index.js'
new Vue({
el: '#app',
store, // 将store暴露出来
template: '<App></App>',
components: { App }
});接下来开始配置 store 目录下的 index.js 文件。
import Vue from 'vue'; //首先引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// state 类似 data
//这里面写入数据
},
getters:{
// getters 类似 computed
// 在这里面写个方法
},
mutations:{
// mutations 类似methods
// 写方法对数据做出更改(同步操作)
},
actions:{
// actions 类似methods
// 写方法对数据做出更改(异步操作)
}
})举例：
在 Store 中定义商品原价，计算折扣价，并根据用户输入的数量与商品原价计算总价。
【1】我们约定 Store 中的数据结构如下：
import Vue from 'vue'; //首先引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex)
export default new Vuex.Store({
state: {
price: 100, // 原价
total: '', // 总价
},
getters:{
// 折扣价
discount(state, getters) {
return state.price*0.8
}
},
mutations:{
// 计算总价：第一个参数为默认参数state, 后面的参数为页面操作传过来的参数
getTotal(state, n) {
return state.total = state.price * n;
}
},
actions:{
// 这里主要是操作异步操作的，使用起来几乎和mutations方法一模一样
// 除了一个是同步操作，一个是异步操作，一个使用commit调用，一个使用dispatch调用
// 这里就不多介绍了，有兴趣的可以自己去试一试，
// 比如你可以用setTimeout去尝试一下
}
})【2】在页面中使用 Store 中的数据：
```javascript
<template>
<div>
<p>原价：{{price}}</p>
<p>8折：{{discount}}</p>
<p>数量：<input type="text" v-model="quantity"></p>
<p>总价：{{total}}</p>
<button @click="getTotal">计算总价</button>
</div>
</template>
<script>
export default {
data() {
return {
quantity: 0,
}
},
computed: {
price() {
return this.$store.state.price
},
discount() {
return this.$store.getters.discount
},
total() {
return this.$store.state.total
}
},
mounted() {
},
methods: {
getTotal() {
this.$store.commit('getTotal', this.quantity)
}
},
}
</script>【3】页面运行效果
再举例应用场景：
例如登录页面，支持手机号验证码登录和手机号密码登录两种模式。在切换登录方式时，若希望保留已输入的手机号码，此时可以使用 Vuex 来保持数据状态。
页面刷新数据丢失问题
Vuex 存储的数据作为全局共享状态，保存在运行内存中。当页面发生刷新时，Vue 实例会重新加载，导致 Vuex 中的数据重新初始化，从而造成数据丢失。
怎么解决？
直接在修改 Vuex 数据的方法中，将数据存储到浏览器缓存中（如 sessionStorage、localStorage 或 cookie）。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store（{
state: {
orderList: [],
menuList: []
},
mutations: {
orderList(s, d) {
s.orderList= d;
window.localStorage.setItem("list",jsON.stringify(s.orderList))
},
menuList(s, d) {
s.menuList = d;
window.localStorage.setItem("list",jsON.stringify(s.menuList))
},
}
}）在页面加载时，再从本地存储中取出数据并赋值给 Vuex。
if (window.localStorage.getItem("list") ) {
this.$store.replaceState(Object.assign({},
this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
}到此这篇关于深入了解Vue.js中的Vuex状态管理模式的文章就介绍到这了,更多相关Vuex状态管理模式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！