Vue: vuex保存Javascript对象、数组

1. 封装 Storage 对象

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存储复杂参数（如对象数组等）刷新数据丢失问题
                    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
build ：将用于生产的应用程序捆绑到dist文件夹中
test ：运行单元测试和端到端测试
test:unit ：在带有*.spec.js后缀的src文件夹中使用和运行单元测试
test:e2e ：在带有*.spec.js后缀的tests/e2e文件夹中，使用Cypress运行E2E测试
format ：在src文件夹中使用Prettier格式化代码
lint ：基于Airbnb的样式指南和Prettier配置的带有ESLint的lint文件
 应用程序与Vue devtools兼容
此实现是系列中的一部分，其中使用相同的体系结构实现了相同的应用
Project setup
1、实现一个简易的Vue模板编译，响应式原理，双向绑定，请查看!smallVue目录
2、Vue-router源码的实现从VueRouter文件目录中查看
3、Vuex源码的实现从vuex文件目录中查看
4、axios源码从axios文件目录中查看
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Customize configuration
See .
首先，因为我有一个需求就是vue组件中有一组多选框，选中多选框的内容，要在另一个组件中进行视图更新，这个就设计的兄弟组件之间的通信了，兄弟组件之前通信我首先选用的vuex这个解决办法。
vuex的state用来放数据，我就把数组放在了vuex中,然后设置了修改的函数。最终store.js中的代码如下：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
 messArray:[]
const mutations = {
 modifyArray(state, obj){
官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel
调试、状态快照导入导出等高级调试功能。
状态管理到底是什么？
状态管理模...
我们使用一条数据去管理一个视图，那么这个数据我们就称之为 ‘状态’
2.vuex是做什么的？
Vuex是一个集中式的存储管理中心，vuex中可以用来存储 数据（ 状态 ）
​vuex也是一个状态管理中心，它也可以进行状态的管理
3.什么是状态管理模式？
我们使用一条数据去管理一个视图，那么这种管理模式就称之为 状态管理
4.什么时候使用vuex？
一般都使用在中大型应用使用
5.vuex的五大特性
state、getters、mutations 、actions 、modules 
# serve with hot reload at localhost:8080
yarn run dev
# build for production with minification
yarn run build
# build for production and view the bundle analyzer report
yarn run build --report
 有关工作原理的详细说明，请查看的和。
 要查看商店中的“普通”值（不添加所有“ Observer功能）
 app . $store . getters . todos
    . map ( JSON . stringify ) // strips utility fields
    . map ( JSON . parse )     // back to plain objects
    . forEach ( t => console . lo
				
vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。
那么，我们一起来看看vue项目怎么使用它吧。（如果你对vuex有一定了解，不是刚接触的小白，请忽略第一步，直接查看第二步）
一、适合初学者使用，保存数据以及获取数据
1、在store文件夹，新建个index.js文件（命名看个人习惯，如果没有该文件夹，可以新建一个，
				
在Vue中，可以使用concat()方法来将两个数组合并成一个新的数组，同时也可以使用spread操作符（...）来将两个数组合并成一个新的数组。对于对象合并，可以使用Object.assign()方法将两个对象合并成一个新的对象。
下面是一个示例代码：
```javascript
// 合并两个数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]
let arr4 = [...arr1, ...arr2];
console.log(arr4); // [1, 2, 3, 4, 5, 6]
// 合并两个对象
let obj1 = {name: '张三', age: 18};
let obj2 = {gender: '男', address: '上海'};
let obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // {name: '张三', age: 18, gender: '男', address: '上海'}
在使用Vue时，我们常常需要将两个数组或对象合并成一个新的数组或对象，以便进行一些操作，例如渲染页面或更新数据等。使用上面的方法，我们可以很方便地实现数组和对象的合并。