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 = idstate.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存储数据的几种方法相关推荐
- vue存储数据的几种方法(Vuex与本地存储)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 vue存储数据的几种方法(Vuex与本地存储) 前言 一.vuex 1.创建vuex 2.存入数据 3.取出数据 二.本地存储 1.存 ...
- android平台上持久化存储3种手段_Android 数据持久化==存储数据的五种方法
1.使用SharedPreferences存储数据 2.文件存储数据 3.SQLite数据库存储数据 4.使用ContentProvider存储数据 5.网络存储数据 第一种: 使用SharedPre ...
- oracle 数据导入 mysql_oracle数据库导出和oracle导入数据的二种方法(oracle导入导出数据)...
这篇文章主要介绍了oracle导入导出数据的二种方法,利用PL/SQL Developer工具导出和利用cmd的操作命令导出的出方法,大家参考使用吧 方法一:利用PL/SQL Developer工具导 ...
- oracle数据库导出和oracle导入数据的二种方法(oracle导入导出数据)
这篇文章主要介绍了oracle导入导出数据的二种方法,利用PL/SQL Developer工具导出和利用cmd的操作命令导出的出方法,大家参考使用吧 方法一:利用PL/SQL Developer工具导 ...
- mysql如何上传照片_MySQL数据库之图片上传存储数据库的2种方法讲解(Mysql)
本文主要向大家介绍了MySQL数据库之图片上传存储数据库的2种方法讲解(Mysql) ,通过具体的内容向大家展现,希望对大家学习MySQL数据库有所帮助. 数据库Mysql存储,读取图片 在项目中,很 ...
- 获得GPS数据的两种方法 1读串口
获得GPS数据的两种方法 1读串口 - [技术] 版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://memset.blogbus.com/logs/17801310.ht ...
- 前端js调用后端API获取数据的三种方法(2022.7.25)
前端js调用后台API获取数据的三种方法(2022.7.25) 前言 需求分析 一个Get实例 浏览器请求 SoapUI软件请求 一个Post实例 浏览器请求 SoapUI软件请求 1.Http简介( ...
- mysql如何防止插入重复数据_防止MySQL重复插入数据的三种方法
新建表格 CREATE TABLE `person` ( `id` int NOT NULL COMMENT '主键', `name` varchar(64) CHARACTER SET utf8 C ...
- java构造和解析json_Java构造和解析Json数据的两种方法详解一
在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面首先介绍用json-lib构造和解析Jso ...
最新文章
- 怎么向女朋友解释什么叫区块链?
- DiscuzNT改造-远程内容自动采集-DNT2.5(定时采集、源码下载)
- 为什么越来越多的程序员开始学机器学习?揭秘一个重要原因
- iOS:通信录(完成)(18-01-18更)
- 前端小知识点(1):undefined和null区别
- Flask 应用部署方式之 Flask+Gunicorn+Nginx
- Align and Prompt:SalesforceANU提出ALPRO,进行细粒度的视频文本对齐!代码已开源!...
- BBED for PostgreSQL
- Pairwork2 总结
- Pyspider爬虫实例:1号店医药电商
- 微软百名员工公开请愿,力挺“996.ICU”
- Mysql查询结果导出为Excel的几种方法
- php doss_ddos PHP版
- 华三服务器bios中查看硬盘,H3C服务器升级BIOS
- 转载:.Net 程序集 签名工具sn.exe 密钥对SNK文件 最基本的用法
- flink本地运行及访问webui
- html动画人物走路,CSS3动画中的steps(),制作人物行走动画
- VC++课程设计常见问题解答
- Linux的安装与Linux下PHP开发环境的搭建(LAMP)
- vue中使用antv/g6 绘制关系图、结构图