Vuex（基础知识）

一、Vuex简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

简单来说，Vuex就是用来集中管理数据的。适用于项目大且很复杂的情况。类似于React中的Redux，都是基于flux的前端状态管理框架。

 

二、基本用法

1、初始化一个项目vuex-demo

运行vue init webpack-simple vuex-demo

运行cd vuex-demo

运行cnpm install

 2、安装vue-x

运行cnpm install vuex -S （安装vuex生产依赖）

3、创建store.js文件（vuex的相关配置都是在store.js中配置的）

在src文件夹下新建文件store.js，并在main.js中导入store.js，并配置store选项

 

 4、编辑store.js文件

Vuex的核心是store（仓库），相当于是一个容器。一个store实例中可以包含以下属性和方法：

• State 　　  用来定义属性（状态）
• Getters　　用来获取属性
• Actions　　用来定义方法（表示动作）
• commit　　提交变化，修改数据的唯一方式就是显式的提交mutations
• mutations   定义变化

注意：不能直接在actions中修改数据，必须显式的提交变化，目的 追踪到状态的变化。

  5、编辑App.vue

在子组件中访问对象的两种方式：

• 方式1：使用this.$store访问store对象

第一步：在App.vue中写对应代码

第二步：在store.js中创建store对象和导出store对象

    第三步：在子组件中页面上展示数据。

  页面上数据展示出来。

• 方式2 通过mapGetters、mapActions访问，Vuex提供了两个方法：

1. mapGetters 用来获取属性（数据）
2. mapActions 用来获取方法（动作）

第一步：在APP.vue（子组件）中导入辅助函数并调用辅助函数

 第二步：在store.js中定义getters并导出getters

 第三步运行cnpm run dev 查看页面显示。

 需求1：点击【增加】按钮，当前数字增加1

第一步：在App.vue中写相应代码

1. 写<button>添加</button> 按钮
2. 导入mapActions
3. 调用辅助函数mapActions

 第二步：在store.js中写相应代码

1. 定义actions
2. 定义mutations
3. 导出actions和mutations

第三步：cnpm run dev 查看页面显示效果。点击【增加】按钮，数字由6变为7。

 

需求2：点击【减少】按钮，当前数字减少1

第一步：在App.vue中写相应代码

1. 写<button>减少</button> 按钮
2. 导入mapActions
3. 调用辅助函数mapActions

  第二步：在store.js中写相应代码

1. 定义actions
2. 定义mutations
3. 导出actions和mutations

  第三步：cnpm run dev 查看页面显示效果。点击【减少】按钮，数字减少1。

 

需求3：只有当前数字大于10的时候，点击【减少】按钮，当前数字减少1；否则，不能减少。

在上述减少需求的基础上，修改以下代码即可。

 需求4：点击【异步增加】按钮，当前数字3秒钟后增加1

第一步：在store.js中写相应代码

第二步：在App.vue中写相应代码

 

 第三步：cnpm run dev查看页面中的效果。

 

需求5：显示当前数字是奇数还是偶数

第一步：在store.js中写相应代码

第二步：在App.vue中写相应代码

 

第三步：cnpm run dev 打开页面查看效果。