将接口数据存储在Vuex里

最近做的一个项目中，由于头部导航是接口返回的，而且数据还特别多，所以这里就运用到了Vuex来存储接口返回的这些数据，就不需要每到一个页面就调用一次接口。

云Girl

5416人浏览 · 2019-10-08 15:01:23

云Girl · 2019-10-08 15:01:23 发布

最近做的一个项目中，由于头部导航是接口返回的，而且数据还特别多，所以这里就运用到了Vuex来存储接口返回的数据，这样子接口就只需要调用一次就可以了。

步骤

1、安装Vuex

npm install vuex --save

2、引用Vuex
(1)、创建一个store文件夹，在index.js里引入Vuex
在这里插入图片描述
（2)、在main.js里引入store文件夹

import store from './store'

3、将接口返回的数据存入store里
在这里插入图片描述
4、获取store里的数据（在导航组件里调用store数据）

大功告成~ 这样子就可以将接口返回的数据存入store里啦

注意昂：用来解决异步流程改变store里的数据的，要在actions里写，因为matution是直接进行同步操作，如果你在mutations里进行异步操作，不会起任何效果，只有通过action=>mutations=>states,这个流程进行操作,数据才会改变哟

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^