21、vue.js 之vuex安装及使用

1、安装vuex

1）在package.json加入vuex

2）到项目文件目录npm install

2、使用vuex

1）前期准备工作

文件创建完毕后，依次：

引入vue、引入vuex、使用vuex、引入/* eslint-disable no-new */、new vuex、在new vuex前面加上export defautl 将其暴露出去让其他地方可以使用、创建数据state并使用

在src下面的main.js中引入vuex，并在new vue中使用vuex 

2)、开始使用

（1）在其他地方使用vuex，此处在App.vue里使用vuex中的数据

运行结果：红色框内为state中的数据

vuex中的数据的使用，另一种使用方式：

在需要使用的模板里按照下面的步骤操作:

运行结果：

vuex中的数据:

如果还需要再其他地方使用,例如：

运行结果：

（2）vuex中mutations函数的使用（函数主要用来操作vuex中的数据）

运行结果：点击加改变age的值

（3）vuex中action函数的使用（函数主要用来调用mutations中的函数，可以异步操作）

运行结果：点击加改变age的值