VUEX

Vuex是状态管理工具，简单的来说VUEX可以帮我们管理“全局变量”，供任何页面在任何时候使用。

VUEX特点：

1）.VUEX中的变量状态是响应式的，当某个组件读取该变量时，只要VUEX中的变量发生变化，对应的组件就会发生变化（类似于双向绑定）
2）用户和程序无法直接改变VUEX中的变量，必须通过VUEX提供的接口来操作，该接口就是通过“commit mutation”实现的。

state

state提供唯一的公共数据源,所有共享的数据都要统一放在Store的State中

组件中访问State的第一种方式

this.$store.state.全局数据名称

组件中访问State的第二种方式

(… 的意思是展开运算符)展开运算符

Mutation

mutation用于变更store里面的数据

触发mutations中函数的第一种方式

要注意的是只有mutations里面的函数才有资格去改变全局变量里面的数据,如果在其他地方修改在监控不到是哪个地方修改的 ,这样不规范也不容易排错

mutations中的函数传递参数

触发mutations中函数的第二种方式

注意mutation函数当中不能写异步的代码,不然不起效果.==>比如延时代码啊 这之类的

Action (专门处理异步代码的)

用于处理异步任务

触发Action的第一种方式

使用Action的第二种方式

Getter的作用

getter不会修改store里面的数据,只会对里面的数据进行加工处理,形成新的数据

Getter的两种使用方式

正常的使用顺序

如果不确定vuex用那个版本，就直接手动安装一下

npm install  vuex —verbose 

然后查看安装版本号就可以了。
新建store文件：这个文件的作用就是声明我们要使用vuex组件进行状态管理，

import Vue from ‘vue’
import Vuex from ‘vuex’
//这个就是我们后续会用到的counter状态
import counter from ‘@/vuex/modules/counter’

Vue.use(Vuex)
const debug = process.env.NODE_ENV !== ‘production’

export default new Vuex.Store({
modules:{
	Counter
},
strict:debug,
middlewares:[]

})

新建vuex/module文件
文件名 src/vuex/models /counter.js

import {INCREASE} from ‘@/vuex/mutation/mutation_types’
const state={
points:10
}
const getters={
	get_points:state=>{
	return state.points
}
}

const mutations={
[INCREASE](state,data){
	state.points=data
}
}

export default={
State,
mutation,
getters
}

上面是一个典型的vuex module 其作用就是计数

state：表示状态，可以认为state是一个数据库，保存了各种数据，但无法直接访问里面的数据
mutation：表示变化，可以认为所有的state都是由mutation来驱动变化的，也可以认为他是setter
getter 取值方法
如果希望获取某个数据 就调用getter方法。更改某个值就调用mutation方法