vuex 数据状态管理，刷新数据不丢失这篇就够了

#vuex 数据状态管理，刷新数据不丢失这篇就够了| 来源: 网络整理| 查看: 265

图片来源网络，侵删

vue 脚手架安装，这里我就不介绍了说重点 !

安装 vuex npm install vuex --save

安装成功后，现在我们就可以使用 vuex 了

先在src 目录下建立 store 文件夹，文件目录如图：

图片上地址为博主的另一个平台博客

这里我先介绍下每个文件的用处： 1 ： index.js 这里是个入口文件

import Vue from 'vue' import Vuex from 'vuex' import * as actions from './actions' import * as getters from './getters' import state from './store' import mutations from './mutations' Vue.use(Vuex) export default new Vuex.Store({ actions, getters, state, mutations })

把我们需要的文件都引入里面，注入并导出！

2 : store.js 文件，这是我们初始化数据的，也是之后我们存数据的地方，这里我先初始化一个 review 空的对象！

const state = { review: {} } export default state;

3：mutation-types.js 这里是我们存常量的，方便我们之后在 mutations 里面调用 ! 这里我先等一个常量为： SET_REVIEW

export const SET_REVIEW = "SET_REVIEW"

4：getters.js 这个你可以看着是个 vue 的计算属性：

export const review = state => state.review

5：mutations.js ，提交 mutations 是更改 vuex中 store 中状态的唯一方法

import * as types from './mutation-types' const mutations = { [types.SET_REVIEW](state, review) { console.log("review", review) state.review = review }, } export default mutations

6：action.js , Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。简单的说：它是操作 mutations 的，现实异步操作！这里我是获取数据，暂时用不到 action.js

代码比较简单，我就直接贴了： index.vue 首页：

链接跳转 import { mapMutations } from "vuex"; export default { data() { return {}; }, mounted() { this.getReviewData(); }, methods: { getReviewData() { let _this = this; _this.$http .get("api/review/needlist") .then(function(response) { console.log(response.data); if (response.data.code === 0) { let list = response.data.list; _this.setReview(list); } }) .catch(function(error) { console.log(error); }); }, linkTo(){ this.$router.push({path:'review'}); }, ...mapMutations({ setReview: "SET_REVIEW" }) } };

这是vue 组件的基本结构在 methods 写个获取数据的方法 getReviewData() ！在 mounted 生命周期里调用获取数据方法

关键：

我们使用 vue 提供的语法糖，来把数据存到 store 里：

引入 vuex 的 mapMutations 方法

import { mapMutations } from "vuex";

在 methods 里面写个 setReview ，它类似于一个方法，和我们调用其他方法完全一致：

...mapMutations({ setReview: "SET_REVIEW" })

最后我们把接口获取的数据传入这个方法中，就完成了数据存入 store 里了！

_this.setReview(list);

接下来，我们就可以使用 store 里面的数据了

下面我们来获取 store 里面的数据，

新建一个 review.vue 组件上代码：

{{item.content}} import {mapGetters} from 'vuex' export default { components: { }, data () { return { }; }, computed:{ ...mapGetters([ 'review' ]) }, mounted() { console.log(this.review); }, methods: {} }

获取数据我们要引入：

import {mapGetters} from 'vuex'

在computed 生命周期里拿值最后我们就可以渲染到页面了！最后上图：

图片上地址为博主的另一个平台博客

这里我们就可以在另一个页面拿到数据了了。

最后我们来说下： vuex 刷新数据丢失问题；这里我们用到了 localStorage本地存储。我们可以在vue 组件里属于，在存数据的时候同时也存到 localStorage 里面。在需要的地方在从 localStorage 获取！

这里我把 localStorage 放到 vuex 里面，不用在每个组件都存一遍我们再 mutations.js里面存数据

localStorage.setItem('review', JSON.stringify(state.review));

在store.js 里面加入以下代码：

//防止页面刷新vuex中的数据丢失 for (var item in state) { localStorage.getItem(item) ? state[item] = JSON.parse(localStorage.getItem(item)) : false; }

这里就解决了我们vuex 刷新数据丢失的问题了！

【本文地址】

公司简介

联系我们

vuex 数据状态管理，刷新数据不丢失 这篇就够了

vuex 数据状态管理，刷新数据不丢失这篇就够了