手把手教你使用Vuex（一）

1.定义

　　vuex 是一个专门为vue.js应用程序开发的状态管理模式。　　　

　　这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。

2.安装

　　（1）利用npm包管理工具安装 npm install vuex --save 　　不会自动生成文件

　　（2）使用vue指令add安装 vue add vuex 　　　　　　　　  会自动生成文件

 

　　　vue3.x的vuex

　　　　

　　　vue2.x的vuex

3.五种默认基本对象

• state：存储状态（全局变量） $store.state.变量名
• getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
• mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
• actions：异步操作。在组件中使用是$store.dispath('')
• modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

　　这些对象可以在store/index.js里写到一起，如上截图，如果处理比较多的话写在一起还是很乱的，可以分开来写，如下

　　

4.使用

　　4.1 以分开文件的vuex说明：

　　　　vue2.x版本使用Vuex

　　　　　

　　　　　一、在store/index.js中引入这些文件和Vue,Vuex。Vue.use(Vuex);将vuex从根组件“注入”到每一个子组件中.然后把属性加在vuex对象中

　　　　　

　　　　　二、在src/main.js中引入store

　　　vue3.x版本使用Vuex

　　　　

　　　　store/index.js中注入Vuex会有变化，主要原因是创建实例方式改变，一些全局的 api 方法也不在全局上了，而是放到了实例上。

　　　　不过放在store/index.js下有些繁琐，main.js也需要引用，不如直接放在main.js中，如下

　　　　　

　　 4.2 state中全局变量使用

　　　　创建:

　　　　　　

　　　　　　store/state.js中创建一个变量count,变量名按需起名，我这只是个

　　　　调用：

　　　　　　

　　　　　　在html中调用和在函数中调用

　　　　　输出结果：

　　　　　　

　　

　　　　vuex系列：

　　　　　　手把手教你使用Vuex（一）

　　　　　　手把手教你使用Vuex（二）

　　　　　　手把手教你使用Vuex（三）

　　　　　　手把手教你使用Vuex（四）

　　　　深入vuex戳这里