目录一、Vuex是什么1、Vuex的构成2、Vuex的使用二、本地存储1.存储数据2.取出数据3.清除数据总结一、Vuex是什么 Vuex是专门为Vuejs应用程序设计的状态管理工具
Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
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。
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
区别:
本地存储可直接使用,不需要引入,代码如下:
// 将this.pickerItem的数据存储入insuranceCode,需提前转化成string类型
localStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));
sessionStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));
现在我要把数据放入vuex中存起来,相当于把苹果放入果盘,我们需要在页面中的方法里面这样使用,代码如下:
JSON.parse(localStorage.getItem("insuranceCode"));
JSON.parse(sessionStorage.getItem("insuranceCode"));
可清楚指定的数据,也可清楚所有数据,代码如下:
// 清除insuranceCode
localStorage.removeItem("insuranceCode");
sessionStorage.removeItem("insuranceCode");
// 清除所有
localStorage.clear();
sessionStorage.clear();
到此这篇关于vuex存储数据的几种方法的文章就介绍到这了,更多相关vuex存储数据内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vuex存储数据的几种方法实例详解
本文链接: https://lsjlt.com/news/169594.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0