Vuex快速入门

Vuex快速入门

Vuex官网（中文）：https://vuex.vuejs.org/zh/

 

1、什么是VueX?

--Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态

--主要应用于Vue.js中管理数据状态的一个库

--通过创建一个集中的数据存储，供程序中所有组价访问

2、使用场景

单一vue组件传值，需要一个个的去传递，通过触发某一个事件，来传递数据，使得子组件之间相互共享数据就会很麻烦。

使用VueX，有一个store专门用来存放数据，组件要使用直接可以getter方法获取数据 ，这样就可以更加清晰的管理数据

 

 

 

步骤一：创建Vuex项目

首先在终端中切换到项目安装路径，输入指令：vue init webpack vuex-demo安装vue-cli项目

切换到项目文件中，输入指令：npm install安装所需要的依赖,运行项目，用编辑器打开，这里我使用webStorm编辑器

接着第一步先将项目中的组件还原成干净简洁的界面

引入bootStrap CDN 地址： https://v3.bootcss.com/getting-started/

Add组件中引入组件，设置测试数据，往子组件中进行传值

子组件中接收传递过来的数据，并循环遍历出来

添加样式，使得界面更加美观

 

步骤二：搭建Vuex中央状态管理

来到npmjs官网中 https://www.npmjs.com/ 搜索vuex,可以得到详细的

查看状态管理区域https://www.npmjs.com/package/vuex

安装Vuex 输入指令 npm install vuex

接着在src目录下创建一个store文件夹，文件夹下面创建一个名为stroe.js的文件，配置好vuex

 

步骤三：使用computed获取store数据

首先在main.js中引入并使用store

成功获取到数据

 

步骤四：Getters方法

先使用普通方法将数据值进行修改

如果有100个组件需要像上面一样进行修改，这样每个组件中添加会非常麻烦，所有就要将它抽离出去，分到main.js中，使用getters属性获取

子组件中去使用它，创建的方法直接去获取getters方法中的数据就可以展示出来了

 

步骤五：Mutations 在触发事件,改变事件的时候才在vuex中使用mutations

进入vuex的官网里面，会有一些方法介绍

首先我们使用普通方法将对商品进行降价

使用mutations方法

使用mutations

设置为严格模式来进行测试：store.js中添加strict:true表示严格模式

报错原因是我们不能够去调用vuex中的mutations的内容

//激活mutations事件 commit（" 是mutations对应的名称 "）
this.$store.commit('reducePrice');就能够正常访问

 

步骤六：Actions

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。

 

通过自己传递的参数进行数据的修改

接收参数

成功展示异步请求的效果

 

步骤七：使用辅助函数mapGetters和mapActions

使用mapGetters和mapActions来接收方法，当store.js中的getters和action的方法很多时，mapGetters和mapActions能够更好的获取，使得它变得更加简单

如果更改之后，刷新浏览器，会不显示界面，报错。原因是…mapGetters和…mapActions这个两个是Es6语法，浏览器目前可能不支持，不识别，不会被解读，这样我们需要安装bable,安装好了之后就可以使用了

输入指令：npm install babel-preset-stage-2 --save-dev

之后在babelrc中presets中添加一个 “stage-2”

最后npm run dev重启项目，就可以成功展示界面

Vuex项目源码链接：https://pan.baidu.com/s/1eoHAOc3RpzK7yXmsgV69uQ

提取码：hipi

如果对本教程还有不清楚的地方，建议去看看相关的视频教学

https://ke.qq.com/user/index/index.html#/plan/cid=279700&term_id=100331213