#Vue 简单的 store 模式

// 简单的 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 之前发生了什么`

// 在需要使用 store 的 .vue 文件里面引入
import store from "@/store/index.js"; // 导入 store 文件
​
或者
​
// 挂载到 vue 实例中
// 在 main.js 中写入
/* 
    引入-----简单的 store 模式
 */
import store from './store/index.js';
Vue.prototype.$store = store;

// 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 变更，
同时实现能做到记录变更、保存状态快照、历史回滚/时光旅行的先进的调试工具`

// 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

npm install vuex-persistedstate --save