Vue方向：Vuex状态管理器的getter和state

1、安装Vuex

Vuex是一个专门为Vue.js应用程序开发的状态管理模式，通俗的来说Vuex就是vue的一个插件，作用就是帮助管理vue的状态。

其中Vuex共有两种安装途径

一是通过vue-cli脚手架的方式去构建项目的时候，选中Vuex去安装

图示

二是通过 npm 命令去安装Vuex状态管理器（这是将vuex安装到开发环境中去）

图示

二、配置Vuex中的store

配置Vuex也有两种方式

第一种，实例化Vuex的store对象去配置，然后state放在store仓库中，再将store暴露出去

代码

第二种，脚手架的配置

通过vue示例中使用store选项，是为了将store对象挂载到Vue的原型上去，这样所有的组件内部都可以使用this.store来操作store了

代码

那么这个store中到底有些什么呢？打印this可以看到，其中有个$store，就是所谓的状态管理，下面有一些属性方法之类的

$store

三、单一状态树

单一状态树是什么意思呢？我的个人理解就是说明一个项目只有一个状态，它不像组件，不同的组件有自己的data选项，而这个单一状态树避免了状态state的冲突，一个项目中只有一个。

既然一个项目中共有一个状态state，那么很显然，这就是一个对象，而不是一个方法，这个对象作为唯一资源数据而存在。

下面画了个草图便于记忆

图示

四、Vuex的数据获取使用

在某个组件中可以直接将值存到Vuex.store中去，然后这时，每个组件便都可以拿到这条数据。

代码

结果1

结果2

五、Vuex中的state的直接修改

这是一种直接修改Vuex,store仓库中的数据的一种方法，但是不推荐使用，因为这种方式去修改state不会被vue-devTool调试工具检测到，因此不推荐使用这种方式去修改。

index.js

代码

执行结果

五、Getter的使用（ Vuex中的数据的过滤处理）

我们从store里的state中派生一些状态出来，对于数据进行过滤处理，在获取数据之后再进行过滤处理，那么同样的逻辑可能需要在不同的地方使用，在Vue中采用的方法是定义计算属性，Vuex提供了一个getter（类似于store中的计算属性），根据依赖状态计算值后返回并缓存起来，只有当getter依赖的状态发生改变时才会被重新计算。

代码

结果

六、Getter的参数

getter的第一个参数的状态为state，用于收获getter的依赖状态

参数

getter的第二个参数就是选项getters，作用是用来获取其他getter函数的。可以用于在已经过滤的状态的基础上再加以过滤。

图示

七、可以通过方法去访问以及传参

通常对于getter的使用方法，都是返回处理完毕后的数据，有时需要处理数据的条件是外部传来的，getter可以返回一个函数，这个函数用来接收外部传递的参数。

getter返回的不是确定的值而是一个函数,通过$store.getters.filterFruits获取到的就是一个函数,既然是函数就可以当成方法使用, 传递参数,例如 $store.getters.filterFruits(20)。

代码