vue学徒之vuex封装

对于一个vue来说，它有自己的一套插件库。我们一般构建一个vue项目，会使用到vue-router，vuex，axios，有了这三个插件，基本上就可以构建一个web网站了。

vue-router

vue-router是什么，你可以这样理解，当我们页面发生跳转，即path发生变化之后（在vue里称作是路由），路由即发生相应的变化，你所看到的页面变化，无非是路由中所渲染的组件发生变化而已。

vuex

vuex是状态管理，通常我们在页面跳转或者交互的时候，会产生数据交互，通常我们的做法可能是通过localstorage，sessionstorage，cookies等进行数据的存储，而vuex则有类似的功能，而不用频繁的操作storage，并且很方便的获取到页面中的数据，便于组件间的数据交互。

axios

axios类似于jQuery中的ajax，用于获取后台数据，支持promise，避免ajax中的回调地狱。对于vue而言，目前算是一个比较好的选择。

基本上一个vue项目有这三个插件，基本上就差不多了，但是在实际开发过程中，我们会使用前端样式库，如element，vant等，当然还有其他的，如vue-echarts-v3，vue-quill-editor，vue-i18n等插件来丰富自己的网站，这里就不一一叙述了。

上一篇已经针对于router做了描述，本片文章主要是针对vuex进行封装，一般而言，我们在项目中可能会有很多个不同的store，来管理不同的状态，如User，module1，module2等，那么你每写一个store都需要在index.js中import一次，非常麻烦。
是否有简单的方法呢？肯定是有的。那么来看一下

首先看到我这边目录结构非常简单，在store目录下有一个index.js,然后其他的store文件均放在modules目录下。
首先看一下index.js做了什么吧！

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let modules = {}
let sessionStore = []
const storeModules = require.context('./modules', false, /\.js/)
storeModules.keys().forEach(filename => {
    const storeModuleItem = storeModules(filename)
    let module_name = filename.split('/').pop().replace('.js', '')
    module_name = module_name[0].toUpperCase() + module_name.slice(1)
    modules[module_name] = storeModuleItem.default || storeModuleItem
    if (storeModuleItem.default && storeModuleItem.default.saveStore) {
        sessionStore.push(module_name)
    }
})

export {sessionStore}

let store = new Vuex.Store({
    modules: modules
})

export default store

从代码看分三步走，
1、引用vuex
2、从modules文件夹导入对应的store文件，并初始化modules字典
3、实例化store并导出给外部使用。
我这里使用到了两个变量，modules主要用来存放store配置的，而sessionStore是用session存储store配置的，我们知道当我们强制刷新页面时（点击页面上的刷新按钮）会导致vuex的配置丢失，而这恰恰是我们应该避免的，所以在强制刷新时，我们通过sessionStore可以将我们认为需要保存的数据存储在session中，避免数据丢失，并且只需要在定义store的时候加一个saveStore参数即可。
那么现在来看一下user.js吧

const UserInfo = {
    namespace: true,
    saveStore: true,
    state: {
        userInfo: {}
    },
    mutations: {
        set_user_info(state, user_info) {
            state.userInfo = JSON.parse(JSON.stringify(user_info))
        }
    }
}

export default UserInfo

很常规的store写法，namespace用来限定命令空间，saveStore是我们控制是否要保存store参数，state是需要管理的状态，而改变store需要通过mutations进行改变。具体可以查看 vuex官网学习更多用法。

这样就大功告成了吗？还没有，还有一件事情，就是需要在页面强制刷新的时候保存store
这个时候看一下APP.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  import {sessionStore} from "./store";
  export default {
    created() {
      let tempStore = sessionStorage.getItem('store')
      if (tempStore) {
        this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(tempStore)))
      }
      window.onbeforeunload = () => {
        let store = {}
        for (let module of sessionStore) {
          store[module] = this.$store.state[module]
        }
        sessionStorage.setItem("store", JSON.stringify(store))
      }
    }
  }
</script>

APP.vue是整个vue页面的入口，在该组件created的时候先从sessionStorage中更新store，并且监听onbeforeunload方法，当页面即将离开或关闭或刷新时会调用该方法，我们在这个时候去保存store就可以了。

vuex的封装就到此结束咯，你也来试一下吧。