Vuex状态管理模式

vue全家桶包括：

        vue-cli:用脚手架搭建项目

        vue:vue语法，渐进式框架，单页面开发，mvvm模式，有双向绑定，操作虚拟dom

        vue-router:路由，用来跳转组件

        axios:ajax技术，用来链接后台

vuex状态管理模式

vuex是vue的前端数据库，用来存储变量，定义的是全局变量，保证数据的一致性，

数据存储类似于sessionStorage,当浏览器关闭会删除。

Vuex其实就是一个为Vue.js设计的数据仓库，就是把各个组件公用的数据放到一个仓库里面进行统一的管理，这样既使得非父子组件间的数据共享变得简单明了，也让程序变得更加可维护,而且只要仓库里面的数据发生了变化，在其他组件里面数据被引用的地方也会自动更新。

为什么要使用Vuex？

1、传值

利用Vuex我们可以将组件之间共享的数据抽取出来，单独存放在一个store（仓库）中去，这样各个组件需要数据的时候直接去仓库里面拿就好了，不用组件之间复杂的传值了，而且需要改变数据的时候，只需要将仓库里面的数据更改即可，各个组件里面引用的地方会自动更新。

2、Vue中的单项数据流

与单向数据流对应的就是双向数据流：双向数据流在Vue中也叫做‘双向绑定’，其实现主要是依靠MVVM框架，在Vue中主要由三个部分组成：View、ViewModel、Model。

在Vue中，数据从父组件传递给子组件，只能是单向绑定，子组件内部不能直接修改从父级传过来的数据。

属性和方法：

1.state 存储变量

2.getters 获取数据的函数，或计算函数

3.action 变更函数，异步函数

4.mutations 处理函数，同步函数

5.mudules 分割函数，用来为vuex创建子模块，在开发大型项目的时候，变量分类存储，存储在若干个子模块当中 

6.this.store.getter.fun 调用getter

7.this.store.commit(函数,参数)调用mutations

8.this.store.commit(函数,参数)调用action

构建vue-cli项目

（1）安装**vuex**

执行命令：

npm i vuex@next -S 安装vue3.0的vuex

npm i vuex -S 安装vue2.0的vuex

（2）引入**vuex**

1. 在src目录下新建一个store文件夹，并在store目录下新建index.js

2. 在index.js里面使用vuex，添加如下代码：

import Vue from 'vue'
import Vuex from 'vuex'

//使用vuex
Vue.use(Vuex)

//导出store
export default new Vuex.Store({})

3. 在main.js中引入store，然后全局注入一下，就可以在任何一个组件里面使用它了

import store from './store'

state是什么?

存数据的地方，所有的数据都要存在state里面。

Actions是什么？

Actions和Mutations比较类似，包含的都是一些方法，不同的是Actions不能直接更改数据，它的作用是提交Mutations，Mutations里面包含的才是具体操作数据的方法。

Mutations是什么？

在vuex中，唯一能够修改数据的方法就是提交mutation，简单来说mutations里面存的就是一些操作数据的方法。