前言
单页应用（Single Page Application，以下简称 SPA）是现代 Web 应用的趋势，它具有快速响应、用户体验良好等优势，然而对于 SPA 来说，状态的管理变得尤为重要。在传统的多页面应用中，每个页面都具有独立的状态，这样并不会对整个应用产生太大的影响，但 SPA 中应用状态是全局共享的，当用户操作导致应用状态改变时，所有组件有可能需要相应变化。为了解决状态管理的问题，Vue 提供了多种方案，如 Vuex、event bus 等。本文着重讲解如何使用 Vuex 来维护 SPA 应用的全局状态。
Vuex 介绍
Vuex 是 Vue 官方推荐的状态管理库，它与 Vue.js 深度集成，可以方便地实现应用中的数据共享和状态管理，使得 SPA 的状态管理变得更加简单和高效。
Vuex 的核心包括：store、state、mutation、action、getter。
- store：管理整个应用的状态，通常被创建在应用的入口文件中，store 中包含了应用的所有状态以及一些操作方法。
- state：表示应用中的状态，相当于全局变量，在虚拟 DOM 中起着重要的作用，便于整个应用共享状态。
- mutation：用于操作 state 中的数据，并且必须是同步函数，可以保证状态的改变是可追踪的。
- action：可以异步操作数据，不直接操作 state，而是通过 commit mutation 来改变 state。
- getter：用于对 state 中的数据进行计算和数据过滤，类似于 Vue 中的 computed。
在 Vue 中使用 Vuex
下面是一个基本的 Vuex 应用实例，展示了如何在 Vue 中使用 Vuex
安装 Vuex
使用 npm 安装 Vuex：
npm install vuex --save
组件中引用
在 main.js 入口文件中引入 Vuex。
// www.javascriptcn.com code example
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{ //列出应用的所有状态值(变量)
count: 0 // 就是我们要管理的状态值
},
mutations:{
increment (state) { // 增加count的值
state.count++
}
}
})
new Vue({
el: '#app',
render: h => h(App),
store // 挂载store
})在组件中使用
在组件中使用 store 里面的 count 进行计数：
// www.javascriptcn.com code example
<template>
<div>
{{ getcount }}
<a href="#" v-on:click="increment">我点击了{{total}}次</a>
</div>
</template>
<script>
export default {
name: 'app',
computed:{
// 获取仓库中的状态值count
getcount(){
return this.$store.state.count;
},
// 计算三倍值
total(){
return this.$store.state.count * 3;
}
},
methods:{
increment: function(){
this.$store.commit('increment')
}
}
};
</script>mutations:{
increment (state) { // 增加count的值
state.count++
}
}通过以上代码可以在组件中获取到仓库中的 count 的值，并给 a 标签绑定了一个点击事件，点击后触发了 store 中的 mutation 的 increment 方法，更新了 count 的值，这时 getcount 属性会被触发，从而更新页面中的数据。
当设定了 state 后，在组件中$store.state.count可以直接获取计数器的值
结语
以上是 Vuex 的基本用法，学习了这个简单的例子还不能体验到 Vuex 的神奇之处，当应用变得更大时，状态管理就变得非常无法操作，而 Vuex 可以帮助我们更好地维护状态，使代码变得更加简洁，同时也保证了应用的性能和可维护性。
此外，Vuex 还有更多的用法，比如 actions、getters 等，读者可以独立学习，提升自己的能力，深入理解 Vuex 的使用，为更好的开发更加复杂的 vue 应用做准备。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfc676e46428fe9ebbc4a6