08Vuex

Vue的状态管理-Vuex

什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。用于管理分散在Vue各个组件中的数据。

有了Vuex的帮助，我们可以把值直接在Vuex中定义，然后提供给整个Vue项目中的组件使用。
其状态管理模式包含三部分
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化

安装(针对vue2)

npm install vuex@3.6.2 --save

引入使用

import Vuex from 'vuex'
Vue.use(Vuex)

使用

每一个 Vuex 应用的核心就是 store（仓库）。

“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

Vuex 和单纯的全局对象有以下两点不同：

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，相应的组件也会得到高效的更新。
• 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation，可以跟踪每一个状态的变化，帮助我们更好地了解我们的应用。

为了能让所有组件使用store，我们需要在Vue的根实例中（下图new Vue就是根实例）注册store实例。子组件则通过this.$store来使用store

实例

在mutation中添加多个方法

mapState

state是一个状态树，用于存放状态值，类似于data(){return{}}，那对应存放的值不可能就一个，可以通过this.$store.state分别获取其中每一个值，但是获取多个值的时候同样的代码需要重复写很多遍，比较繁琐。而mapState这个辅助函数解决我们的重复繁琐的代码。

computed是计算属性，如果在计算属性中需要添加其他的方法则需要对代码进行如下修改，mapState以三个点为开始进行书写。

如果需要对state中的值进行改变，可以通过对象的方式进行值的修改，该方式更灵活