Cache options by vuex.

src/components/Tools/UserMenu.vue

@@ -63,7 +63,6 @@
 import HeaderComment from './HeaderComment'
 import SettingDrawer from '@/components/SettingDrawer/SettingDrawer'
 import { mapActions, mapGetters } from 'vuex'
-import optionApi from '@/api/option'
 
 export default {
   name: 'UserMenu',
@@ -73,19 +72,14 @@ export default {
   },
   data() {
     return {
-      optionVisible: true,
-      options: [],
-      keys: ['blog_url']
+      optionVisible: true
     }
   },
   mounted() {
     this.optionVisible = this.$refs.drawer.visible
   },
-  created() {
-    this.loadOptions()
-  },
   computed: {
-    ...mapGetters(['user'])
+    ...mapGetters(['user', 'options'])
   },
   methods: {
     ...mapActions(['logout']),
@@ -114,11 +108,6 @@ export default {
     showOptionModal() {
       this.optionVisible = this.$refs.drawer.visible
       this.$refs.drawer.toggle()
-    },
-    loadOptions() {
-      optionApi.listAll(this.keys).then(response => {
-        this.options = response.data.data
-      })
     }
   }
 }

src/core/bootstrap.js

@@ -11,7 +11,8 @@ import {
   DEFAULT_FIXED_SIDEMENU,
   DEFAULT_CONTENT_WIDTH_TYPE,
   USER,
-  API_URL
+  API_URL,
+  OPTIONS
 } from '@/store/mutation-types'
 import config from '@/config/defaultSettings'
 
@@ -27,6 +28,6 @@ export default function Initializer() {
   store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
   store.commit('SET_USER', Vue.ls.get(USER))
   store.commit('SET_API_URL', Vue.ls.get(API_URL))
-
+  store.commit('SET_OPTIONS', Vue.ls.get(OPTIONS))
   // last step
 }

src/store/getters.js

@@ -12,7 +12,8 @@ const getters = {
       return state.app.apiUrl
     }
     return `${window.location.protocol}//${window.location.host}`
-  }
+  },
+  options: state => state.option.options
 }
 
 export default getters

src/store/index.js

@@ -4,6 +4,7 @@ import Vuex from 'vuex'
 import app from './modules/app'
 import user from './modules/user'
 import permission from './modules/permission'
+import option from './modules/option'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -12,7 +13,8 @@ export default new Vuex.Store({
   modules: {
     app,
     user,
-    permission
+    permission,
+    option
   },
   state: {
 

src/store/modules/option.js

@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import {
+  OPTIONS
+} from '@/store/mutation-types'
+import optionApi from '@/api/option'
+const keys = ['blog_url']
+const option = {
+  state: {
+    options: []
+  },
+  mutations: {
+    SET_OPTIONS: (state, options) => {
+      Vue.ls.set(OPTIONS, options)
+      state.options = options
+    }
+  },
+  actions: {
+    loadOptions({
+      commit
+    }) {
+      return new Promise((resolve, reject) => {
+        optionApi
+          .listAll(keys)
+          .then(response => {
+            commit('SET_OPTIONS', response.data.data)
+            resolve(response)
+          })
+          .catch(error => {
+            reject(error)
+          })
+      })
+    }
+  }
+}
+
+export default option

src/store/modules/user.js

@@ -1,5 +1,8 @@
 import Vue from 'vue'
-import { ACCESS_TOKEN, USER } from '@/store/mutation-types'
+import {
+  ACCESS_TOKEN,
+  USER
+} from '@/store/mutation-types'
 import adminApi from '@/api/admin'
 import userApi from '@/api/user'
 
@@ -16,7 +19,9 @@ const user = {
       Vue.ls.set(ACCESS_TOKEN, token)
       state.token = token
     },
-    SET_NAME: (state, { name }) => {
+    SET_NAME: (state, {
+      name
+    }) => {
       state.name = name
     },
     SET_AVATAR: (state, avatar) => {
@@ -35,7 +40,9 @@ const user = {
     }
   },
   actions: {
-    loadUser({ commit }) {
+    loadUser({
+      commit
+    }) {
       return new Promise((resolve, reject) => {
         userApi
           .getProfile()
@@ -48,7 +55,12 @@ const user = {
           })
       })
     },
-    login({ commit }, { username, password }) {
+    login({
+      commit
+    }, {
+      username,
+      password
+    }) {
       return new Promise((resolve, reject) => {
         adminApi
           .login(username, password)
@@ -64,7 +76,9 @@ const user = {
           })
       })
     },
-    logout({ commit }) {
+    logout({
+      commit
+    }) {
       return new Promise(resolve => {
         commit('CLEAR_TOKEN')
         adminApi
@@ -77,7 +91,9 @@ const user = {
           })
       })
     },
-    refreshToken({ commit }, refreshToken) {
+    refreshToken({
+      commit
+    }, refreshToken) {
       return new Promise((resolve, reject) => {
         adminApi
           .refreshToken(refreshToken)

src/store/mutation-types.js

@@ -9,6 +9,7 @@ export const DEFAULT_FIXED_HEADER_HIDDEN = 'DEFAULT_FIXED_HEADER_HIDDEN'
 export const DEFAULT_CONTENT_WIDTH_TYPE = 'DEFAULT_CONTENT_WIDTH_TYPE'
 export const USER = 'USER'
 export const API_URL = 'API_URL'
+export const OPTIONS = 'OPTIONS'
 
 export const CONTENT_WIDTH_TYPE = {
   Fluid: 'Fluid',

src/views/comment/components/CommentDetail.vue

@@ -126,8 +126,8 @@
 </template>
 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
+import { mapGetters } from 'vuex'
 import commentApi from '@/api/comment'
-import optionApi from '@/api/option'
 export default {
   name: 'CommentDetail',
   mixins: [mixin, mixinDevice],
@@ -166,7 +166,9 @@ export default {
   },
   created() {
     this.loadSkeleton()
-    this.loadOptions()
+  },
+  computed: {
+    ...mapGetters(['options'])
   },
   watch: {
     visible: function(newValue, oldValue) {
@@ -184,11 +186,6 @@ export default {
         this.detailLoading = false
       }, 500)
     },
-    loadOptions() {
-      optionApi.listAll(this.keys).then(response => {
-        this.options = response.data.data
-      })
-    },
     handleEditComment() {
       this.editable = true
     },

src/views/comment/components/CommentTab.vue

@@ -262,8 +262,8 @@
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
 import commentApi from '@/api/comment'
-import optionApi from '@/api/option'
 import marked from 'marked'
 import CommentDetail from './CommentDetail'
 const postColumns = [
@@ -376,14 +376,11 @@ export default {
       replyComment: {},
       loading: false,
       commentStatus: commentApi.commentStatus,
-      options: [],
-      keys: ['blog_url'],
       commentDetailVisible: false
     }
   },
   created() {
     this.loadComments()
-    this.loadOptions()
   },
   computed: {
     formattedComments() {
@@ -392,7 +389,8 @@ export default {
         comment.content = marked(comment.content, { sanitize: true })
         return comment
       })
-    }
+    },
+    ...mapGetters(['options'])
   },
   methods: {
     loadComments() {
@@ -410,11 +408,6 @@ export default {
       this.queryParam.page = 0
       this.loadComments()
     },
-    loadOptions() {
-      optionApi.listAll(this.keys).then(response => {
-        this.options = response.data.data
-      })
-    },
     handleEditStatusClick(commentId, status) {
       commentApi.updateStatus(this.type, commentId, status).then(response => {
         this.$message.success('操作成功！')

src/views/dashboard/Dashboard.vue

@@ -331,15 +331,15 @@
 import { PageView } from '@/layouts'
 import AnalysisCard from './components/AnalysisCard'
 import RecentCommentTab from './components/RecentCommentTab'
+import countTo from 'vue-count-to'
+import UploadPhoto from '../../components/Upload/UploadPhoto.vue'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
-import optionApi from '@/api/option'
+import { mapGetters } from 'vuex'
 
 import postApi from '@/api/post'
 import logApi from '@/api/log'
 import adminApi from '@/api/admin'
 import journalApi from '@/api/journal'
-import countTo from 'vue-count-to'
-import UploadPhoto from '../../components/Upload/UploadPhoto.vue'
 export default {
   name: 'Dashboard',
   mixins: [mixin, mixinDevice],
@@ -371,8 +371,6 @@ export default {
       },
       journalPhotos: [], // 日志图片集合最多九张
       logs: [],
-      options: [],
-      keys: ['blog_url'],
       logPagination: {
         page: 1,
         size: 50,
@@ -385,11 +383,6 @@ export default {
     this.getCounts()
     this.listLatestPosts()
     this.listLatestLogs()
-    this.loadOptions()
-
-    // this.interval = setInterval(() => {
-    //   this.getCounts()
-    // }, 5000)
   },
   computed: {
     formattedPostData() {
@@ -410,7 +403,8 @@ export default {
         log.type = this.logType[log.type].text
         return log
       })
-    }
+    },
+    ...mapGetters(['options'])
   },
   beforeRouteEnter(to, from, next) {
     next(vm => {
@@ -440,11 +434,6 @@ export default {
       }
       this.journalPhotos.push(photo)
     },
-    loadOptions() {
-      optionApi.listAll(this.keys).then(response => {
-        this.options = response.data.data
-      })
-    },
     listLatestPosts() {
       postApi.listLatest(5).then(response => {
         this.postData = response.data.data

src/views/dashboard/components/RecentCommentTab.vue

@@ -54,8 +54,8 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import commentApi from '@/api/comment'
-import optionApi from '@/api/option'
 
 import marked from 'marked'
 export default {
@@ -73,9 +73,7 @@ export default {
   data() {
     return {
       comments: [],
-      loading: false,
-      options: [],
-      keys: ['blog_url']
+      loading: false
     }
   },
   computed: {
@@ -84,18 +82,13 @@ export default {
         comment.content = marked(comment.content, { sanitize: true })
         return comment
       })
-    }
+    },
+    ...mapGetters(['options'])
   },
   created() {
     this.loadComments()
-    this.loadOptions()
   },
   methods: {
-    loadOptions() {
-      optionApi.listAll(this.keys).then(response => {
-        this.options = response.data.data
-      })
-    },
     loadComments() {
       this.loading = true
       commentApi.latestComment(this.type, 5, 'PUBLISHED').then(response => {

src/views/interface/components/ThemeSetting.vue

@@ -221,10 +221,10 @@
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import AttachmentSelectDrawer from '../../attachment/components/AttachmentSelectDrawer'
 import FooterToolBar from '@/components/FooterToolbar'
+import { mapGetters } from 'vuex'
 import Verte from 'verte'
 import 'verte/dist/verte.css'
 import themeApi from '@/api/theme'
-import optionApi from '@/api/option'
 export default {
   name: 'ThemeSetting',
   mixins: [mixin, mixinDevice],
@@ -249,8 +249,6 @@ export default {
       },
       viewMode: false,
       formColValue: 12,
-      options: [],
-      keys: ['blog_url'],
       clientHeight: document.documentElement.clientHeight
     }
   },
@@ -272,7 +270,6 @@ export default {
   created() {
     this.loadSkeleton()
     this.initData()
-    this.loadOptions()
   },
   watch: {
     visible: function(newValue, oldValue) {
@@ -281,6 +278,9 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters(['options'])
+  },
   methods: {
     loadSkeleton() {
       this.settingLoading = true
@@ -288,11 +288,6 @@ export default {
         this.settingLoading = false
       }, 500)
     },
-    loadOptions() {
-      optionApi.listAll(this.keys).then(response => {
-        this.options = response.data.data
-      })
-    },
     initData() {
       this.settingLoading = true
 

src/views/post/PostList.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="page-header-index-wide">
-    <a-card :bordered="false" :bodyStyle="{ padding: '16px' }">
+    <a-card
+      :bordered="false"
+      :bodyStyle="{ padding: '16px' }"
+    >
       <div class="table-page-search-wrapper">
         <a-form layout="inline">
           <a-row :gutter="48">
@@ -303,9 +306,9 @@ import PostSetting from './components/PostSetting'
 import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
 import TagSelect from './components/TagSelect'
 import CategoryTree from './components/CategoryTree'
+import { mapGetters } from 'vuex'
 import categoryApi from '@/api/category'
 import postApi from '@/api/post'
-import optionApi from '@/api/option'
 const columns = [
   {
     title: '标题',
@@ -389,9 +392,7 @@ export default {
       postSettingVisible: false,
       selectedPost: {},
       selectedTagIds: [],
-      selectedCategoryIds: [],
-      options: [],
-      keys: ['blog_url']
+      selectedCategoryIds: []
     }
   },
   computed: {
@@ -400,11 +401,11 @@ export default {
         post.statusProperty = this.postStatus[post.status]
         return post
       })
-    }
+    },
+    ...mapGetters(['options'])
   },
   created() {
     this.loadPosts()
-    this.loadOptions()
     this.loadCategories()
   },
   methods: {
@@ -425,11 +426,6 @@ export default {
         this.categories = response.data.data
       })
     },
-    loadOptions() {
-      optionApi.listAll(this.keys).then(response => {
-        this.options = response.data.data
-      })
-    },
     handleEditClick(post) {
       this.$router.push({ name: 'PostEdit', query: { postId: post.id } })
     },

src/views/post/components/PostSetting.vue

@@ -195,7 +195,7 @@ import CategoryTree from './CategoryTree'
 import CategorySelectTree from './CategorySelectTree'
 import TagSelect from './TagSelect'
 import AttachmentSelectDrawer from '../../attachment/components/AttachmentSelectDrawer'
-import optionApi from '@/api/option'
+import { mapGetters } from 'vuex'
 import categoryApi from '@/api/category'
 import postApi from '@/api/post'
 export default {
@@ -212,8 +212,6 @@ export default {
       thumbDrawerVisible: false,
       categoryFormVisible: false,
       settingLoading: true,
-      options: [],
-      keys: ['blog_url'],
       selectedPost: this.post,
       selectedTagIds: this.tagIds,
       selectedCategoryIds: this.categoryIds,
@@ -262,7 +260,6 @@ export default {
   },
   created() {
     this.loadSkeleton()
-    this.loadOptions()
     this.loadCategories()
   },
   watch: {
@@ -297,7 +294,8 @@ export default {
         return moment(date, 'YYYY-MM-DD HH:mm:ss')
       }
       return moment(new Date(), 'YYYY-MM-DD HH:mm:ss')
-    }
+    },
+    ...mapGetters(['options'])
   },
   methods: {
     loadSkeleton() {
@@ -306,11 +304,6 @@ export default {
         this.settingLoading = false
       }, 500)
     },
-    loadOptions() {
-      optionApi.listAll(this.keys).then(response => {
-        this.options = response.data.data
-      })
-    },
     loadCategories() {
       categoryApi.listAll().then(response => {
         this.categories = response.data.data

src/views/sheet/SheetList.vue

@@ -246,8 +246,8 @@
 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import SheetSetting from './components/SheetSetting'
+import { mapGetters } from 'vuex'
 import sheetApi from '@/api/sheet'
-import optionApi from '@/api/option'
 import menuApi from '@/api/menu'
 
 const internalColumns = [
@@ -319,9 +319,7 @@ export default {
       sheetSettingVisible: false,
       internalSheets: [],
       sheets: [],
-      options: [],
-      menu: {},
-      keys: ['blog_url']
+      menu: {}
     }
   },
   computed: {
@@ -330,12 +328,12 @@ export default {
         sheet.statusProperty = this.sheetStatus[sheet.status]
         return sheet
       })
-    }
+    },
+    ...mapGetters(['options'])
   },
   created() {
     this.loadSheets()
     this.loadInternalSheets()
-    this.loadOptions()
   },
   methods: {
     loadSheets() {
@@ -350,11 +348,6 @@ export default {
         this.internalSheets = response.data.data
       })
     },
-    loadOptions() {
-      optionApi.listAll(this.keys).then(response => {
-        this.options = response.data.data
-      })
-    },
     handleEditClick(sheet) {
       this.$router.push({ name: 'SheetEdit', query: { sheetId: sheet.id } })
     },

src/views/sheet/components/SheetSetting.vue

@@ -108,7 +108,7 @@
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import moment from 'moment'
 import AttachmentSelectDrawer from '../../attachment/components/AttachmentSelectDrawer'
-import optionApi from '@/api/option'
+import { mapGetters } from 'vuex'
 import themeApi from '@/api/theme'
 import sheetApi from '@/api/sheet'
 export default {
@@ -121,8 +121,6 @@ export default {
     return {
       thumbDrawerVisible: false,
       settingLoading: true,
-      options: [],
-      keys: ['blog_url'],
       selectedSheet: this.sheet,
       customTpls: []
     }
@@ -149,7 +147,6 @@ export default {
   },
   created() {
     this.loadSkeleton()
-    this.loadOptions()
     this.loadCustomTpls()
   },
   watch: {
@@ -172,7 +169,8 @@ export default {
         return moment(date, 'YYYY-MM-DD HH:mm:ss')
       }
       return moment(new Date(), 'YYYY-MM-DD HH:mm:ss')
-    }
+    },
+    ...mapGetters(['options'])
   },
   methods: {
     loadSkeleton() {
@@ -181,11 +179,6 @@ export default {
         this.settingLoading = false
       }, 500)
     },
-    loadOptions() {
-      optionApi.listAll(this.keys).then(response => {
-        this.options = response.data.data
-      })
-    },
     loadCustomTpls() {
       themeApi.customTpls().then(response => {
         this.customTpls = response.data.data

src/views/system/OptionForm.vue

@@ -716,10 +716,10 @@
 </template>
 <script>
 import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
+import { mapActions } from 'vuex'
 import optionApi from '@/api/option'
 import mailApi from '@/api/mail'
 import attachmentApi from '@/api/attachment'
-import { mapActions } from 'vuex'
 
 export default {
   components: {
@@ -747,11 +747,11 @@ export default {
     }
   },
   mounted() {
-    this.loadOptions()
+    this.loadFormOptions()
   },
   methods: {
-    ...mapActions(['loadUser']),
-    loadOptions() {
+    ...mapActions(['loadUser', 'loadOptions']),
+    loadFormOptions() {
       optionApi.listAll().then(response => {
         this.options = response.data.data
         this.handleAttachChange(this.options['attachment_type'])
@@ -1013,6 +1013,7 @@ export default {
       }
 
       optionApi.save(this.options).then(response => {
+        this.loadFormOptions()
         this.loadOptions()
         this.loadUser()
         this.$message.success('保存成功！')

src/views/user/Login.vue

@@ -99,7 +99,7 @@ export default {
     ...mapGetters({ defaultApiUrl: 'apiUrl' })
   },
   methods: {
-    ...mapActions(['login', 'loadUser']),
+    ...mapActions(['login', 'loadUser', 'loadOptions']),
     ...mapMutations({
       setApiUrl: 'SET_API_URL',
       restoreApiUrl: 'RESTORE_API_URL'
@@ -123,6 +123,7 @@ export default {
     loginSuccess() {
       // Cache the user info
       this.loadUser()
+      this.loadOptions()
       if (this.$route.query.redirect) {
         this.$router.replace(this.$route.query.redirect)
       } else {

src/views/user/Profile.vue

@@ -6,7 +6,10 @@
         :md="24"
         :style="{ 'padding-bottom': '12px' }"
       >
-        <a-card :bordered="false" :bodyStyle="{ padding: '16px' }">
+        <a-card
+          :bordered="false"
+          :bodyStyle="{ padding: '16px' }"
+        >
           <div class="profile-center-avatarHolder">
             <a-tooltip
               placement="right"
@@ -149,8 +152,7 @@
 import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
 import userApi from '@/api/user'
 import adminApi from '@/api/admin'
-import optionApi from '@/api/option'
-import { mapMutations } from 'vuex'
+import { mapMutations, mapGetters } from 'vuex'
 import MD5 from 'md5.js'
 
 export default {
@@ -168,20 +170,18 @@ export default {
         newPassword: null,
         confirmPassword: null
       },
-      attachment: {},
-      options: [],
-      keys: ['blog_url']
+      attachment: {}
     }
   },
   computed: {
     passwordUpdateButtonDisabled() {
       return !(this.passwordParam.oldPassword && this.passwordParam.newPassword)
-    }
+    },
+    ...mapGetters(['options'])
   },
   created() {
     this.loadUser()
     this.getCounts()
-    this.loadOptions()
   },
   methods: {
     ...mapMutations({ setUser: 'SET_USER' }),
@@ -191,11 +191,6 @@ export default {
         this.profileLoading = false
       })
     },
-    loadOptions() {
-      optionApi.listAll(this.keys).then(response => {
-        this.options = response.data.data
-      })
-    },
     getCounts() {
       adminApi.counts().then(response => {
         this.counts = response.data.data