vuex基础

Vuex是什么？

官网解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

我理解的是：全局状态管理，vuex用来管理各组件需要公用的状态值，简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。它能够有效的解决兄弟组件，父子组件，爷孙组件的传值。

一、Vuex使用。

1、首先要安装vuex（这里不在介绍npm等的安装）

npm install vuex -save

2、使用vuex

（1）在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js,里面的内容如下:（引入vue，引入vuex，使用vuex，创建vuex实例）

（2）在main.js中引入store，然后再全局注入一下，这样一来就可以在任何一个组件里面使用this.$store了

3、介绍一个vuex的五大重要属性，state，getters，mutations，action，module

（1）State
单一状态树，每个应用将仅仅包含一个 store 实例。
（2）Getter
可以认为是 store 的计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
（3）Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
（4）Action
类似于 mutation，在于Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作
（5）Module
Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。模块内部的 action、mutation 和 getter 是注册在全局命名空间的。

二、不使用module开发

1、可以将state、mutations等写在index.js中，也可以分开写成单独的js文件，在index.js中引入

   整体写在index.js中，存放内容如下：

2、在组件中使用

首先引入mapState，mapMutationsdeng ，然后将state在computed中引入，将mutattions方法在methods中引入，具体引入方法如下：（name为state中的，changeName为mutations中的）

（1）import {mapGetters,mapState,mapMutations} from "vuex"

（2）...mapState({

               name:state=>state.name,

      }),

（3）...mapMutations(['changeName']),

（4）提交载荷

       你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload），在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：（更多提交风格可以参考vuex官网）

 

（5）具体使用样例如下：

三、使用module开发

（1）在之前建的store文件夹下新建一个文件夹modules，在modules文件夹下新建所需的模块js

（2）index.js存放内容

（3）模块js中存放的内容

（4）组件中使用（注意模块对应准确）