vuex的使用

vuex的作用

开发依赖：npm i xxx-D

生产依赖：npm i xxx-S 或者 npm i xxx

1.下载vuex  npm i vuex

2.在项目的src文件夹下新建一个store的文件夹 在这个文件夹下新建index.js

vuex中的5个元素  

state 定义公共数据

mutations：用来修改state里面的数据

getters：有时候我们需要从 store 中的 state 中派生出一些状态(与组件中computed一样)。在state中的数据的基础上，进一步对数据进行加工得到新数据（作用和计算属性一样，通过state中的数据来计算一些结果）

actions(在里面用于写异步请求的)

modules（用于拆分模块的，把一些需要的数据整合到一个模块中）

使用vuex

如果是新项目可以在新建项目的时候选择Vuex 

如果是老项目中没有vuex 需要的话，就下载一个vuex 

然后在src的目录下新建一个store的文件夹，在这个文件夹下新建index.js文件

然后在里面配置vuex

然后到main.js中导入

state公共数据的使用

在任意组件中通过this.$store.state.state中的数据名来访问。

如果是在模板中，则可以省略this而直接写成： {{$store.state.state中的数据名}}

state是响应式的，如果修改了数据，相应的在视图上的值也会改变

mutations:用来修改state中的数据

mutations用来修改state中的数据，在index.js中修改数据，直接写state.啥就行，不用加this。

在其他页面调用就写this.$store.commit('mutations中定义的名字'，参数2表示要传入用来修改state的值，这个值如果要传递多个参数就用对象包住来进行传递，在mutations中定义的时候，参数1必须是state)

---

getter基于state里面的数据来求一些数（和计算属性基本一个意思）

actions 用来发异步请求

页面调用调用 this.$store.dispatch('actions中定义的方法')

把发axios的请求放到index.js中的actions中，

使用actions的时候，会自动传入一个context ，这个context就相当于store 所以上图中可以 直接用

context 也相当于store

虽然actions和mutations在同一个index.js页面它就可以调用mutations里面的方法调用和其他页面调用一样  commit

调用 this.$store.dispatch('actions中定义的方法')

modules用来拆分模块的 

注意  ： 正常情况下需要把modules里面的代码都单独抽取到一个文件中，在这个文件当中导出，同时，在index.js当中导入使用

如下图导入一个books.js的文件中然后在引入这个文件

引入这个文件

这个时候在页面使用的时候，还是需要加模块名字

在 modules中建一个对象，如下图 起一个 对象的名字， namespaced：true 表示开启命名空间，开启后，这个对象里面就相当于独立起来了，state就代表对象里面自己的state，同时在其他页面调用对象里面的东西，就需要在前面加上模块的名字  如右边的booksjiu就是加上了模块的名字

modules里面的数据就是独立的，同时，只能影响到自己模块里面的数据。自己里面需要啥就把啥写进去 包括 getters或mutations或actions等

注意  ： 正常情况下需要把modules里面的代码都单独抽取到一个文件中，在这个文件当中导出，同时，在index.js当中导入使用

如果用了modules模块化并且开启了namespaced在访问里面的数据的时候就需要在前面加上模块名  要访问里面的单个一条属性的数据

---

使用mapState映射 把store文件夹里面index.js定义的数据映射出来使用（state和getters和modules映射到计算属性中，mutations和actions映射到methods中）

直接映射的是全局的index.js中的数据，映射的时候前面加上模块的名字映射的就是模块里面的数据  写到index中modules中的数据就是模块中的数据

在需要使用的页面中导入 import {mapState} from ‘vuex’ 然后放到当前页面的计算属性中使用

里面的...mapstate（[books]）表示的是一个对象，前面加...表示展开对象

表示把里面的值映射成一个当前页面的计算属性 在上面就可以直接用了 如{{books}}

vuex.bindings表示的都是其他index.js中映射过来的数据，依然可以直接使用，和当前页面的计算属性一样的使用

注意映射过来的数据的名字有可能和当前组件中的数据重名，这个时候在映射的时候，就需要同时把映射过来的数据换一个名字来使用

将state中的数据映射到当前组件的计算属性中使用

---

---

把mutations中的数据映射到当前页面

如何使用  映射到methods，注意这个时候moutios中的数据映射到了引入页面的this上，

如下图，需要配合this使用 同时在映射到当前页面的时候，也可以改名字

下图的是全局的

---

引入全局mutations中的方法，到当前页面的话， 使用的时候配合this使用

引入模块化的mutations中的方法，到当前页面的时候引入的时候，在方法前面加上模块化的名字

使用还是配合this使用