Vue: 使用Vuex 保存 Javascript对象、数组__vue 对象转数组

由于 页面刷新 可能会造成 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 中保存的对象、数组。 
最后需要说明的是，Vuex 是一个提升 变量作用范围 的工具，Vuex将 state 当做 全局变量 存储。F5刷新页面之后自然随着页面的刷新重新初始化 state；故刷新后，Vuex中的数据全部丢失！ 
References 
解决vuex存储复杂参数（如对象数组等）刷新数据丢失问题