对于一个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目录结构
首先看到我这边目录结构非常简单，在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的封装就到此结束咯，你也来试一下吧。
网友评论