VUE中vuex的使用
一、vuex定义：
官方定义：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
理解官方定义：vuex就是一个存放多个组件共用的一个数据的存放、更改、处理的一个容器，就是说来存放处理公共数据的工具，存放的数据一变，各个组件都会更新，也就是说存放的数据是响应式的。
二、使用流程：
-
安装vuex插件（npm install vuex – save）
-
在src目录下面创建文件夹store （与app.js平级），并且在store下创建index.jsw文件；引入vue和vuex；
import Vue from ‘vue’
import Vuex from ‘vuex’ -
使用全家桶的时候都需要use 一下；
Vue use （Vuex） -
创建对象；
const store = new Vuex.Store({
state: { },
mutations: { },
actions: { }，
getters: { }，
}) -
导出对象；
export default store -
在main.js中引入，即可使用；
-
在state的index.js中写入数据；在其他app.vue组件内拿到并且显示数据，使用 $store.state.counter 进行显示；
启动项目，页面显示；
在vuex中，对数据的修改需要按照规定好的规定进行修改和操作；
这就需要在mutations中定义方法进行state中的数据进行操作；
在其他组件内app.vue组件内怎么触发这个事件类型呢，通过定义函数进而commit触发修改事件，以达到修改数据的行为 ；进而同步数据；
运行之后；点击按钮++，数字会加1，点击按钮–，数字会减1；如图；
使用mutations传递参数
只需要在mutations的事件类型里面添加一个对应参数接收就好；
在app.vue页面添加函数传递参数，通过commit触发相应的事件类型，
接下来刷新页面；
mutations传参完毕！！！
当使用的state数据需要通过一些变化后在使用的话，就需要用到getters了；比如每次需要获取state中counter的平方，可以在getters中定义事件类型；对数据进行处理过滤；
在app.js组建内，拿到并且显示getters变化后的数据；
getters还可以对对象，数组等进行数据的操作；
未完待续-------