一片文章轻度解析Vuex

Posted 2020-11-28 shibataizi

 > Vuex是vue内部的状态管理模式, 它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化, 

## 状态管理 

*  状态指的是数据的状态

　- 在vue使用的模式是mvvm 数据驱动视图,视图可以改变数据, 

　- 状态管理就是数据的管理 ,在全局声明一种变量,准确的说就是数据在全局存放,这些数据可以在全局内进行访问和操作.

## 为什么要使用Vuex?

　- 如果某些数据需要在全局组件中频繁的使用,就好好考虑一下是否要使用Vuex来吧数据升级到全局中

　- 当然vue中的字符组件之间的传值也是一个非常好的一种数据处理的方式 但如果多个组件需要同一个数据的话, 使用子父传值,或者字符组件传值,就比较繁琐和代码冗余.

　- vue中字符组件或者非子父组件传值,这些数据的传递都是单向数据的传递, 就是‘单向数据流‘理念

## 到底什么时候要使用呢?

> flux框架就想眼镜 , 您自然会知道什么时候需要它.

 

## 开始啦

### 使用Vuex 

 * 在html一般不会使用Vuex ,所以我们的例子 在aps单文件组件中使用, 在main.js 入口函数中要确保使用Vue.use(Vuex)这样Vuex 才可以在全局内部使用

　　- 在目录中创建一个js文件

```js

const store = new Vuex.store({

　　// State 是 Vuex对象中的实例成员对象 内部键名为在Vue 全局内部使用的数据

　　state :{

　//变量名使用的变量名

　　aa  : 0 

　　}

　　//Mutation  是Vuex中对象中的实例成员对象 ,  内部定义的是 操作State数据的方法,

　　// 在内部的方法默认传参为State 

　　内部的函数默认的第一个形参为 state 第二个参数为选填, 但只支持1个参数,故不能传入第三个参数

　　// 如果需要多个参数, 当使用这个方法的时候传入 的参数可以为一个对象.

　　mutations {

　　increment (state) {

　　state.count++ 

}

}

})

```

 

## 成功了

* 这样一个数据状态管理器就已经创建成功了

　　-  Vuex中的数据与单纯的Vue 全局对象中的数据有些不同, 

> vuex 的状态存储是响应式的 ,可以动态的影响所有绑定数据的视图 但全局封装的对象数据,不是相应式的, 也就是不能数据驱动视图了,

> Store中的数据,Vue官方称之为状态,这个数据是不能直接改变的, 唯一改变数据的 方式就是通过commit 吧修改的数据提交到Store中,从而更新数据,而且这些提交更改的数据,还可以被浏览器插件所监视到,可以通过可视化的方式进行数据回溯, 当数据量少的情况下,这种方式并不明显, 但遇到比较大量的数据集,这样的功能就对我们调试程序有极大的帮助了

### 获取数据

```js

 

 

```