vuex 数据状态管理,解决刷新数据不丢失

更新日期: 2020-11-30阅读: 1.6k标签: vuex

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 首页:

<!--  -->
<template>
  <div>
      <span @click="linkTo()">链接跳转</span>
  </div>
</template>

<script type='text/ecmascript-6'>
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"
    })
  }
};
</script>
<style scoped>
</style>

这是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 组件
上代码 :

<!--  -->
<template>
  <div>
    <ul>
      <li v-for="(item,index) in review" :key="index">
        <span>{{item.content}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  components: {
},

  data () {
    return {
    };
  },

computed:{
   ...mapGetters([
     'review'
  ])
},
mounted() {
    console.log(this.review);
},
 methods: {}
}

</script>
<style scoped>
</style>

获取数据 我们要引入 :

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 刷新数据 丢失的问题了 !


链接: https://fly63.com/article/detial/10006

为什么使用Vuex

在学习Vuex之前,先了解一下“单向数据流”。Vuex核心就是它的store,其中,有三个重要的部分,State:通过它存取多个组件共享的数据。Mutations:可以改变State中的数据,Actions:提交mutation,可以包含任意异步操作这一步不是必要的。

Vue.js学习,关于Vuex源码解析

Vuex是一个专门为Vue.js框架设计的、用于对Vue.js应用程序进行状态管理的库,它借鉴了Flux、redux的基本思想,将共享的数据抽离到全局,以一个单例存放,同时利用Vue.js的响应式机制来进行高效的状态管理与更新。

vue + vuex + koa2交互实例

主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用。搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径

vuex 源码:深入 vuex 之 mutation

vuex 规定更改 state 的唯一方法是提交 mutation,主要是为了能用 devtools 追踪状态变化。那么,提交 mutation 除了最主要的更改 state,它还做了其它一些什么事情呢,让我们来一探究竟。

使用Vuex解决Vue中的身份验证

Vuex为Vue.js应用管理状态.。对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变。对于经常检查本地存储来说,听起来是个更好的选择?让我们一起来探索下吧。

关于Vuex的action传入多个参数的问题

已知Vuex中通过actions提交mutations要通过context.commit(mutations,object)的方式来完成,然而commit中只能传入两个参数,第一个就是mutations,第二个就是要传入的参数

Vuex 的异步数据更新

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数 mutation 是同步执行,不是异步执行。

vue单页面应用刷新网页后vuex的state数据丢失的解决方案

其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。一种是state里的数据全部是通过请求来触发action或mutation来改变

Vuex状态管理,state、getter

首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :然后 在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:接下来,在 main.js里面引入store,然后再全局注入一下

Vuex新手的理解与使用

开始尝试学习使用vue,是因为此前总是遇到页面逻辑数据与视图的一致性问题.在使用vue之前,我们使用jQuery插件的时候,一桩麻烦事就是既要在每个数据变更后,写代码去改变视图,又要考虑html上各种输入

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!