fixed: storage util

add: vue-ls lib

Author: sendya

package.json

@@ -20,6 +20,7 @@
     "viser-vue": "^2.3.0",
     "vue": "^2.5.17",
     "vue-cropper": "^0.4.0",
+    "vue-ls": "^3.2.0",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },

src/components/layout/LayoutMain.vue

@@ -22,7 +22,7 @@
       :menus="menus"
       :theme="theme"
       :mode="menuMode"
-      :collapsed="!siderOpen || collapsed"
+      :collapsed="collapsed"
       :collapsible="true"></sider-menu>
 
     <a-layout>
@@ -45,7 +45,7 @@
   import SiderMenu from '@/components/menu/SiderMenu'
   import LayoutHeader from './LayoutHeader'
   import LayoutFooter from './LayoutFooter'
-  import {mapState} from 'vuex'
+  import { mapState, mapActions } from 'vuex'
 
   export default {
     name: "LayoutView",
@@ -70,19 +70,22 @@
     computed: {
       ...mapState({
         mainMenu: state => state.permission.addRouters,
-        siderOpen: state => state.app.sidebar.opened,
+        sidebarOpened: state => state.app.sidebar.opened,
         theme: state => state.app.theme,
         device: state => state.app.device,
       })
     },
+    mounted() {
+      this.collapsed = this.sidebarOpened
+    },
     methods: {
+      ...mapActions(['setSidebar']),
       toggle() {
         this.collapsed = !this.collapsed;
+        this.setSidebar(this.collapsed)
       },
       menuSelect() {
-
         if (this.device !== 'desktop') {
-          console.log('selected')
           this.collapsed = false
         }
       }

src/components/table/index.js

@@ -57,11 +57,13 @@ export default {
       });
     },
     pageSize(val) {
+      console.log('pageSize:', val)
       Object.assign(this.localPagination, {
         pageSize: val
       });
     },
     showSizeChanger(val) {
+      console.log('showSizeChanger', val)
       Object.assign(this.localPagination, {
         showSizeChanger: val
       });
@@ -111,7 +113,6 @@ export default {
           });
 
           !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
-          console.log(this.localPagination);
           this.localDataSource = r.data; // 返回结果中的数组数据
           this.localLoading = false
         });
@@ -216,6 +217,7 @@ export default {
       return props[k] = _vm[k];
     })
 
+
     // 显示信息提示
     if (this.showAlertInfo) {
 
@@ -248,7 +250,7 @@ export default {
       ]);
 
     }
-
+/*
     return h("a-table", {
       tag: "component",
       attrs: props,
@@ -257,5 +259,7 @@ export default {
       },
       scopedSlots: this.$scopedSlots
     }, this.$slots.default);
+    */
+
   }
 };

src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
+import Storage from 'vue-ls'
 import router from './router/'
 import store from './store/'
 
@@ -13,18 +14,33 @@ import * as dayjs from 'dayjs' // 日期时间支持库
 
 import '@/permission' // permission control
 
+import { ACCESS_TOKEN, DEFAULT_THEME, SIDEBAR_TYPE } from "@/store/mutation-types"
+
 Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
   return dayjs(dataStr).format(pattern)
 })
 
+const options = {
+  namespace: 'ant__', // key prefix
+  name: 'ls', // name variable Vue.[ls] or this.[$ls],
+  storage: 'local', // storage name session, local, memory
+}
+
+Vue.config.productionTip = false
+
+Vue.use(Storage, options)
 Vue.use(Antd)
 Vue.use(VueAxios, router)
 Vue.use(Viser)
 
-Vue.config.productionTip = false
-
 new Vue({
   router,
   store,
+  mounted () {
+    store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
+    store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, 'dark'))
+    store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
+
+  },
   render: h => h(App)
 }).$mount('#app')

src/permission.js

@@ -1,10 +1,10 @@
+import Vue from 'vue'
 import router from './router'
 import store from './store'
 
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
-
-import { getToken } from "./utils/auth"
+import { ACCESS_TOKEN } from "@/store/mutation-types"
 
 NProgress.configure({ showSpinner: false })// NProgress Configuration
 
@@ -13,7 +13,7 @@ const whiteList = ['/login']// no redirect whitelist
 router.beforeEach((to, from, next) => {
   NProgress.start() // start progress bar
 
-  if (getToken()) {
+  if (Vue.ls.get(ACCESS_TOKEN)) {
     /* has token */
     if (to.path === '/login') {
       next({ path: '/dashboard/workplace' })

src/store/modules/app.js

@@ -1,44 +1,39 @@
-import { getStore, setStore } from "@/utils/storage"
-
-let theme = getStore('_DEFAULT_THEME')
+import Vue from 'vue'
+import { SIDEBAR_TYPE, DEFAULT_THEME } from "@/store/mutation-types"
 
 const app = {
   state: {
     sidebar: {
-      opened: !+getStore('sidebarStatus'),
+      opened: true,
       withoutAnimation: false
     },
     device: 'desktop',
-    theme: !theme ? 'dark' : theme
+    theme: ''
   },
   mutations: {
-    TOGGLE_SIDEBAR: state => {
-      if (state.sidebar.opened) {
-        setStore('sidebarStatus', 1)
-      } else {
-        setStore('sidebarStatus', 0)
-      }
-      state.sidebar.opened = !state.sidebar.opened
-      state.sidebar.withoutAnimation = false
+    SET_SIDEBAR_TYPE: (state, type) => {
+      state.sidebar.opened = type
+      Vue.ls.set(SIDEBAR_TYPE, type)
     },
     CLOSE_SIDEBAR: (state, withoutAnimation) => {
-      setStore('sidebarStatus', 1)
+      Vue.ls.set(SIDEBAR_TYPE, true)
       state.sidebar.opened = false
       state.sidebar.withoutAnimation = withoutAnimation
     },
     TOGGLE_DEVICE: (state, device) => {
       state.device = device
     },
     TOGGLE_THEME: (state, theme) => {
-      setStore('_DEFAULT_THEME', theme)
+      // setStore('_DEFAULT_THEME', theme)
+      Vue.ls.set(DEFAULT_THEME, theme)
       state.theme = theme
     }
   },
   actions: {
-    ToggleSideBar: ({ commit }) => {
-      commit('TOGGLE_SIDEBAR')
+    setSidebar: ({ commit }, type) => {
+      commit('SET_SIDEBAR_TYPE', type)
     },
-    CloseSideBar({ commit }, { withoutAnimation }) {
+    CloseSidebar({ commit }, { withoutAnimation }) {
       commit('CLOSE_SIDEBAR', withoutAnimation)
     },
     ToggleDevice({ commit }, device) {

src/store/modules/user.js

@@ -1,10 +1,11 @@
+import Vue from 'vue'
 import { login, getInfo, logout } from "@/api/login"
-import { setToken, getToken, removeToken } from '@/utils/auth'
+import { ACCESS_TOKEN } from "@/store/mutation-types"
 import { welcome } from "@/utils/util"
 
 const user = {
   state: {
-    token: getToken(),
+    token: '',
     name: '',
     welcome: '',
     avatar: '',
@@ -37,7 +38,7 @@ const user = {
       return new Promise((resolve, reject) => {
         login(userInfo).then(response => {
           const result = response.result
-          setToken(result.token)
+          Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
           commit('SET_TOKEN', result.token)
           resolve()
         }).catch(error => {
@@ -83,7 +84,7 @@ const user = {
       return new Promise((resolve) => {
         commit('SET_TOKEN', '')
         commit('SET_ROLES', [])
-        removeToken()
+        Vue.ls.remove(ACCESS_TOKEN)
 
         logout(state.token).then(() => {
           resolve()

src/store/mutation-types.js

@@ -0,0 +1,3 @@
+export const ACCESS_TOKEN = 'Access-Token'
+export const SIDEBAR_TYPE = 'SIDEBAR_TYPE'
+export const DEFAULT_THEME = 'DEFAULT_THEME'

src/utils/auth.js

@@ -1,4 +1,7 @@
-import { setStore, getStore, clearStore } from "@/utils/storage";
+/**
+ * 弃用
+ */
+import { setStore, getStore, clearStore } from "@/utils/storage"
 
 export const TokenKey = 'Access-Token'
 

src/utils/request.js

@@ -1,9 +1,9 @@
+import Vue from 'vue'
 import axios from 'axios'
 import store from '../store'
 import { VueAxios } from './axios'
 import notification from 'ant-design-vue/es/notification'
-import { getToken } from "@/utils/auth"
-
+import { ACCESS_TOKEN } from "@/store/mutation-types"
 
 // 创建 axios 实例
 const service = axios.create({
@@ -28,7 +28,7 @@ const err = (error) => {
 
 // request 拦截器
 service.interceptors.request.use(config => {
-  const token = getToken()
+  const token = Vue.ls.get(ACCESS_TOKEN)
   if (token) {
     config.headers[ 'Access-Token' ] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
   }