Vuex的用法及组成部分

Vuex的用法及组成部分

1.Vuex是什么？

1. 借鉴 了Flux、Redux、 The Elm Architecture

2. Vuex是专为vue.js设计的状态管理模式。

3. 集中式存储和管理应用程序中所有组件的状态

4. Vuex 也集成到 Vue 的官方调试工具

5. 一个 Vuex 应用的核心是 store（仓库，一个容器），store包含着你的应用中大部分的状态 (state)
   2.什么情况下我应该使用 Vuex？

6. 不适用：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的 store 模式。

7. 适用于：中大型单页应用，你可能会考虑如何把组件的共享状态抽取出来，以一个全局单例模式管理，不管在哪个组件，都能获取状态/触发行为，解决问题如下：

① 多个视图使用于同一状态：
传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力

② 不同视图需要变更同一状态：
采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码

3.Vuex组成部分：
state:进行组件共享数据的集中存储{}
getters:原理computed 用于返回最新的数据值{计算属性写法}
mutations:唯一一个能够修改state里面数据的地方-（函数）-不能做异步
actions:处理异步请求-异步调用mutations函数
modules:模块 当数据比较多的情况下，而且数据之前没有什么关系，用模块划分，每一个模块对象都包含以上4部分
同时提供了3个对象：
mapState:mapState对象辅助操作state,拿到state里的一些数据
mapGetters:mapGetters辅助操作getters通过计算属性返回的一些新的数据值
mapActions：mapActions辅助操作actions函数的调用

commit 同步调用mutations方法
disptatch 异步调用actions方法

3.使用
安装：
npm i vuex --save-dev
创建一个目录store然后配置个主文件index.js

可以直接在index.js里写那5部分，但是为了后期好管理，可以写成单独的文件。
有几大组成部分就建几个js文件
state里放数据的，var一个对象然后在暴露出去


用state要把它接过来并且挂载到vuex对象上。
mutations是操作state数据的，直接把state传到函数中就能解析

再把mutations引入到index.js中。

由于需要对vue的实例化对象操作，需要在vue主文件中去

获取数据的话有来种方式：
要在页面展示数据可以直接取：

还有一种就是间接取（通过mapState）：

用这个方法需要把通过vuex中引进过来

需要在computed这个计算属性中来获取数据，因为state有多个数据，用扩展运算符接收并用数组存

操作数据mutations

通过comit()来调用mutations里的函数

getters的操作，声明好了以后，也需要挂载到index.js上。

getters的数据获取（mapGetters）


actions是对mutations里事件和数据做异步操作的（actions里操作的事件要和mutations里的一致，调用mutations里的函数都是通过commit()）：


用的话直接起事件相同的名字，都要借助mapActions


因为属于事件行为，所以和methods相关，所以要写到methods中

actions有第二种方法，通过dispatch（）的方法调用；

modules的数据获取，modules是当数据过多是可以分成很多模块管理；

modules里面的state直接获取数据不一样，其他的都是一样的：