Vue: 使用Vuex 保存 Javascript对象、数组
Vue: vuex保存Javascript对象Storage.js:const storage = {set(key, value) {window.sessionStorage.setItem(key, value)},get(key) {return window.sessionStorage.getItem(key)},remove(key) {window.sessionSto
·
Vue: vuex保存Javascript对象、数组
在网上找了一大圈,基本就没有专门的一篇博客讲解 Vuex 如何保存
vuex 保存 Javascript对象、数组大致分为以下几个步骤:
- 封装 Storage 对象
- 在 Vuex 的
store
、getters
和mutations
中编写保存方法 - 利用
JSON.stringify()
方法封装 Javascript 对象、数组为JSON类型 - 利用 Vuex 的
getters
方法获取 Vuex 中保存的值,通过JSON.prase()
解析封装的JSON值,从而访问 Vuex 保存的对象。
1. 封装 Storage 对象
由于 页面刷新
可能会造成 Vuex 中保存的变量、对象
、数组
丢失,故将 Vuex 中的存储的状态变量,保存到浏览器缓存 —— sessionStorage 中;并在Vuex的 getters
中获取 sessionStorage 中保存的值,防止页面刷新数据丢失。
storage.js :
const storage = {
set(key, value) {
window.sessionStorage.setItem(key, value)
},
get(key) {
return window.sessionStorage.getItem(key)
},
remove(key) {
window.sessionStorage.removeItem(key)
}
}
export default storage
2. 在 Vuex 的 store
、getters
和 mutations
中编写保存方法
Vuex.js:
import Vue from 'vue'
import Vuex from 'vuex'
import storage from '../utils/storage'
Vue.use(Vuex)
export default new Vuex.Store({
state: { // 数据保存在state内,在任何组件内通过this.$store.state.XX来读取
// Vuex保存对象
user: {
userAccount: null,
password: null,
},
// Vuex保存数组
demoList: []
},
// 用来直接修改state内的数据;在组件内,通过this.$store.commit(方法名)来执行mutations
// mutations: 本质上是一个对象
// mutations中主要是改变state初始值的方法, 用法: 通过传入state或额外参数
// 利用vue的双向驱动进行state中值的修改;
mutations: {
createUser(state, user) {
state.user = user;
},
setDemoList(state, demoList) {
state.demoList = demoList
}
},
// 提交的是mutation, 并且可以异步操作
// 异步触发mutations中的方法
// action中的自定义函数: 一个context(上下文)以及要变化的 “形参”
// context与store实例具有相同的方法和属性, 故context.commit('')有效!
// 作用:存在业务逻辑
// action在组件内通过this.$store.dipatch(方法名)来触发
actions: {
// this.$store.dispatch('createUser');
commitToken(context) {
context.commit('createUser');
},
},
// 将各个组件中的computed中的方法提取出来
// 实时监测state中变量值的变化
// 可以通过this.$store.state.xxx获取变量值, 但getters更专业(类似于Bean的getter方法)
getters: {
// 方法名随意
// _this.$store.getters.getUser
getUser(state) {
state.user = storage.get('user');
return state.user;
},
getDemoList(state) {
state.demoList = storage.get("demoList");
return state.demoList;
}
},
modules: { // 用来将store分割到不同模块
}
})
3. 利用 JSON.stringify()
方法封装 Javascript 对象、数组为JSON类型
4. 利用 Vuex 的 getters
方法获取 Vuex 中保存的值,通过 JSON.prase()
解析封装的JSON值,从而访问 Vuex 保存的对象。
<template>
<div class="container">
用户名: <input type="text" v-model="userAccount" placeholder="请输入用户名...">
密码: <input type="password" v-model="password" placeholder="请输入密码..">
<h3>show User:</h3>
<p>{{showAccount}}</p>
<p>{{showPassword}}</p>
<h3>show demoList:</h3>
<p>{{showList[0].id}}</p>
<p>{{showList[0].name}}</p>
<p>{{showList[0].content}}</p>
</div>
</template>
<script>
import storage from '@/utils/storage';
export default {
name: "Login",
components: {
},
created() {
var user = new Object();
user.userAccount = this.userAccount;
user.password = this.password;
storage.set('user', JSON.stringify(user));
this.$store.commit('createUser', storage.get('user'));
this.showAccount = JSON.parse(this.$store.getters.getUser).userAccount;
this.showPassword = JSON.parse(this.$store.getters.getUser).password;
storage.set('demoList', JSON.stringify(this.demooList));
this.$store.commit('setDemoList', storage.get('demoList'));
this.showList = JSON.parse(this.$store.getters.getDemoList);
},
data() {
return {
userAccount: null,
password: null,
showAccount: null,
showPassword: null,
demoList: [
{
id: 1,
name: "China",
content: "hello China!",
},
{
id: 2,
name: "world",
content: "hello world!",
},
],
showList: []
}
},
};
</script>
<style scoped>
</style>
解决数据刷新丢失问题:
将 Javascript 对象封装成 JSON :
封装成JSON:
storage.set('user', JSON.stringify(user));
解析JSON:
var user = JSON.parse(storage.get('user'));
输出观察:
console.log("----(((-------");
// console.log(user.userAccount);
console.log(_this.$store.getters.getUser.userAccount);
console.log("----)))-------");
console.log(JSON.parse(_this.$store.getters.getUser).userAccount);
console.log("----)))-------");
不使用 JSON.prase() 解析,则无法有效访问 Vuex 中保存的对象、数组。
ps:
最后需要说明的是,Vuex 是一个提升 变量作用范围 的工具,Vuex将 state 当做 全局变量 存储。F5刷新页面之后自然随着页面的刷新重新初始化 state;故刷新后,Vuex中的数据全部丢失!
References
更多推荐
已为社区贡献5条内容
所有评论(0)