优化主题在页面刷新后重置的问题

src/components/ThemePicker/index.vue

 <template>
 <template>
   <el-color-picker
   <el-color-picker
     v-model="theme"
     v-model="theme"
-    :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
+    :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d']"
     class="theme-picker"
     class="theme-picker"
     popper-class="theme-picker-dropdown"
     popper-class="theme-picker-dropdown"
   />
   />
@@ -10,7 +10,7 @@
 <script>
 <script>
 const version = require('element-ui/package.json').version // element-ui version from node_modules
 const version = require('element-ui/package.json').version // element-ui version from node_modules
 const ORIGINAL_THEME = '#409EFF' // default color
 const ORIGINAL_THEME = '#409EFF' // default color
-
+import Cookies from 'js-cookie'
 export default {
 export default {
   data() {
   data() {
     return {
     return {
@@ -31,7 +31,8 @@ export default {
       immediate: true
       immediate: true
     },
     },
     async theme(val) {
     async theme(val) {
-      const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
+      Cookies.set('theme', val, { expires: 365 })
+      const oldVal = this.chalk ? this.theme : Cookies.get('theme') ? Cookies.get('theme') : ORIGINAL_THEME
       if (typeof val !== 'string') return
       if (typeof val !== 'string') return
       const themeCluster = this.getThemeCluster(val.replace('#', ''))
       const themeCluster = this.getThemeCluster(val.replace('#', ''))
       const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
       const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))

src/layout/index.vue

@@ -12,6 +12,8 @@
         <settings />
         <settings />
       </right-panel>
       </right-panel>
     </div>
     </div>
+    <!--  防止刷新后主题丢失  -->
+    <Theme v-show="false" ref="theme" />
   </div>
   </div>
 </template>
 </template>
 
 
@@ -20,7 +22,8 @@ import RightPanel from '@/components/RightPanel'
 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 import { mapState } from 'vuex'
-
+import Theme from '@/components/ThemePicker'
+import Cookies from 'js-cookie'
 export default {
 export default {
   name: 'Layout',
   name: 'Layout',
   components: {
   components: {
@@ -29,7 +32,8 @@ export default {
     RightPanel,
     RightPanel,
     Settings,
     Settings,
     Sidebar,
     Sidebar,
-    TagsView
+    TagsView,
+    Theme
   },
   },
   mixins: [ResizeMixin],
   mixins: [ResizeMixin],
   computed: {
   computed: {
@@ -49,6 +53,15 @@ export default {
       }
       }
     }
     }
   },
   },
+  mounted() {
+    if (Cookies.get('theme')) {
+      this.$refs.theme.theme = Cookies.get('theme')
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: Cookies.get('theme')
+      })
+    }
+  },
   methods: {
   methods: {
     handleClickOutside() {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })

src/store/modules/settings.js

 import variables from '@/assets/styles/element-variables.scss'
 import variables from '@/assets/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 import defaultSettings from '@/settings'
-
 const { tagsView, fixedHeader, sidebarLogo, uniqueOpened, showFooter, footerTxt, caseNumber } = defaultSettings
 const { tagsView, fixedHeader, sidebarLogo, uniqueOpened, showFooter, footerTxt, caseNumber } = defaultSettings
 
 
 const state = {
 const state = {