vuex存储数据的几种方法实例详解

 更新时间:2022年10月18日 10:44:53   作者:长春小霸王  
在浏览网页时我们有些时候需要记住一些用户选择的信息,比如登陆时我们如果选择了记住密码,那么我们下次进入该网页时就会有你上次的登陆信息,下面这篇文章主要给大家介绍了关于vuex存储数据的几种方法,需要的朋友可以参考下

一、Vuex是什么

Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

1、Vuex的构成

1)state

state是存储的单一状态,是存储的基本数据。

2)Getters

getters是store的计算属性,对state的加工,是派生出来的数据。就像computed计算属性一样,getter返回的值会根据它的依赖被缓存起来,且只有当它的依赖值发生改变才会被重新计算。

3)Mutations

mutations提交更改数据,使用store.commit方法更改state存储的状态。(mutations同步函数)

4)Actions

actions像一个装饰器,提交mutation,而不是直接变更状态。(actions可以包含任何异步操作)

5)Module

Module是store分割的模块,每个模块拥有自己的state、getters、mutations、actions。

2、Vuex的使用

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const state = {
 id:null,
 code:null,
 
}
const mutations = {
  //保存数据
  CHANGE_ACTIVE_LI(state, { id, code }) {
    state.id = id
    state.code = code
  },
   //清除数据
   SET_CLEAR_DATA(state,data){
    state.id=data
  }
}
const actions = {
  //保存数据
  changeSetting({ commit }, data) {
    commit('CHANGE_ACTIVE_LI', { id: data.id, code: data.code })
  },
  //清除数据
  clearVuex({ commit }) {
    commit("SET_CLEAR_DATA", null);
  },
 
}
export default {
  //解决模块名冲突
  namespaced: true,
  state,
  mutations,
  actions
 
 next() {
 //这里的product/changeSetting是指定vuex中的方法,我这里指定把后面的对象加在prouduct中changeSetting方法里面去
      this.$store.dispatch("product/changeSetting", {
        id: this.id,
        code: this.code,
      });
    },
//取出vuex中proudct.js中的id的值
  this.id = this.$store.state.product.id;

二、本地存储

vuex存储的数据会在页面刷新后被移除,但本地存储的数据却不会。本地存储分两种:localStorage和sessionStorage

区别:

  • localStorage:可长期存储数据,除非用户清楚localStorage信息,否则数据会一直存在。同一中浏览器之间,不同页面,数据可以共享。
  • sessionStorage:短期存储数据,用户关闭标签页后或直接关闭浏览器后数据会清空。同一浏览器不同页面之间,数据不可共享使用方法相同。

1.存储数据

本地存储可直接使用,不需要引入,代码如下:

// 将this.pickerItem的数据存储入insuranceCode,需提前转化成string类型
localStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));
sessionStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));

2.取出数据

现在我要把数据放入vuex中存起来,相当于把苹果放入果盘,我们需要在页面中的方法里面这样使用,代码如下:

 JSON.parse(localStorage.getItem("insuranceCode"));
JSON.parse(sessionStorage.getItem("insuranceCode"));

3.清除数据

可清楚指定的数据,也可清楚所有数据,代码如下:

// 清除insuranceCode
localStorage.removeItem("insuranceCode");
sessionStorage.removeItem("insuranceCode");
// 清除所有
localStorage.clear();
sessionStorage.clear();

总结

到此这篇关于vuex存储数据的几种方法的文章就介绍到这了,更多相关vuex存储数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue echarts模拟后端数据流程详解

    Vue echarts模拟后端数据流程详解

    在平常的项目中,echarts图表我们也是使用的非常多的,通常我们从后端拿到数据,需要在图表上动态的进行呈现,接下来我们就模拟从后端获取数据然后进行呈现的方法
    2022-09-09
  • Vue状态机的开启与停止操作详细讲解

    Vue状态机的开启与停止操作详细讲解

    Vuex是专门为Vuejs应用程序设计的状态管理工具,这篇文章主要给大家介绍了关于Vuex状态机快速了解与实例应用的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue-cli3.0之配置productionGzip方式

    vue-cli3.0之配置productionGzip方式

    这篇文章主要介绍了vue-cli3.0之配置productionGzip方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue3中props传参方式详解

    Vue3中props传参方式详解

    这篇文章主要为大家详细介绍了Vue3中props传参方式(多种数据类型传参方式)的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-11-11
  • Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

    Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

    今天很郁闷,遇到这样一个奇葩问题,使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新后页面报404错误,折腾半天才解决好,下面小编把Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案分享给大家,需要的朋友一起看看吧
    2018-05-05
  • 如何在Vue中使用debouce防抖函数

    如何在Vue中使用debouce防抖函数

    本文主要介绍在Vue中使用debouce防抖函数,设置一个门槛值,表示两次 Ajax 通信的最小间隔时间。如果在间隔时间内,发生新的keydown事件,则不触发 Ajax 通信,并且重新开始计时。如果过了指定时间,没有发生新的keydown事件再将数据发送出去,这便是debouce防抖函数
    2021-12-12
  • Vue + Vue-router 同名路由切换数据不更新的方法

    Vue + Vue-router 同名路由切换数据不更新的方法

    本篇文章主要介绍了Vue + Vue-router 同名路由切换数据不更新的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 基于vue+face-api.js实现前端人脸识别功能

    基于vue+face-api.js实现前端人脸识别功能

    基于face-api.js要实现人脸识别功能,首先要将自己需要的模型文件下载保存在静态目录下,可以通过cdn的方式在index.html中引入face-api.js,本文给大家介绍vue+face-api.js实现前端人脸识别功能,感兴趣的朋友一起看看吧
    2023-12-12
  • 基于vue-ssr的静态网站生成器VuePress 初体验

    基于vue-ssr的静态网站生成器VuePress 初体验

    VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好。这篇文章主要介绍了基于vue-ssr的静态网站生成器VuePress 初体验,需要的朋友可以参考下
    2018-04-04
  • vue查询数据el-table不更新数据的解决方案

    vue查询数据el-table不更新数据的解决方案

    这篇文章主要介绍了vue查询数据el-table不更新数据的问题及解决方案,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12

最新评论