Vue 简单的 store 模式

1、在 src 目录下 创建 store / index.js

// 简单的 store 模式
let store = {
    debug: true,
    state: {
        message: 'Hello!'
    },
    setMessageAction(newValue) {
        if (this.debug) console.log('setMessageAction triggered with', newValue)
        this.state.message = newValue;
    },
    clearMessageAction() {
        if (this.debug) console.log('clearMessageAction triggered')
        this.state.message = '';
    }
}
export default store

`需要注意，所有 store 中 state 的变更，都放置在 store 自身的 action 中去管理。
这种集中式状态管理能够被更容易地理解哪种类型的变更将会发生，以及它们是如何被触发。
当错误出现时，我们现在也会有一个 log 记录 bug 之前发生了什么`

2、引入 store / index.js

// 在需要使用 store 的 .vue 文件里面引入
import store from "@/store/index.js"; // 导入 store 文件

或者

// 挂载到 vue 实例中
// 在 main.js 中写入
/* 
    引入-----简单的 store 模式
 */
import store from './store/index.js';
Vue.prototype.$store = store;

3、.vue 文件里的 data 里面设置

// a.vue
var vmA = new Vue({
    data(){
        return {
            privateState: {},
            sharedState: store.state, // .vue 引入方法，此处必须这样写，如果写成sharedState: store.state.message则不能同步更新
            // sharedState: this.$store.state // 挂载到 vue 实例方法
        }
    }
})

// b.vue
var vmB = new Vue({
    data(){
        return {
            privateState: {},
            sharedState: store.state // .vue 引入方法，此处必须这样写，如果写成sharedState: store.state.message则不能同步更新
            // sharedState: this.$store.state // 挂载到 vue 实例方法
        }
    }
})
`这样就和普通的 data 数据一样使用了`

`接着我们继续延伸约定，组件不允许直接变更属于 store 实例的 state，而应执行 action 来分发 (dispatch) / 事件通知 store 去改变，
我们最终达成了 Flux 架构。这样约定的好处是，我们能够记录所有 store 中发生的 state 变更，
同时实现能做到记录变更、保存状态快照、历史回滚/时光旅行的先进的调试工具`

4、解决页面刷新之后 store 数据丢失问题

原因：刷新页面时，vue实例重新加载，从而，store也被重置了。store是用来存储组件状态的，而不是用来做本地数据存储的。所以，对于不希望页面刷新之后被重置的数据，使用本地存储来进行存储。

cookie: 不适合存储大量的数据。
localStorage: 是永久存储，浏览器关闭后数据不会丢失，除非主动删除数据。当关闭页面后重新打开，会读取上一次打开的页面数据。
sessionStorage: 在当前浏览器窗口关闭后自动删除。所以，sessionStorage 最合适

// store / index.js 修改
let store = {
    debug: true,
    state: window.sessionStorage.getItem('sharedState') ? JSON.parse(window.sessionStorage.getItem('sharedState')) : {
        message: 'Hello!'
    }
}
export default store


// 在 App.vue 中添加
mounted() {
    // 监听当浏览器窗口关闭或者刷新时
    // window.addEventListener('unload', this.saveSharedState)
    window.addEventListener('beforeunload', this.saveSharedState)
},
methods: {
    saveSharedState() {
        window.sessionStorage.setItem('sharedState', JSON.stringify(this.$store.state))
    }
}

// 也就是监听 unload 或者 beforeunload 方法，如果重载页面就把 state 存入 sessionStorage

vuex-persistedstate（vuex持久化状态插件）

npm install vuex-persistedstate --save