使用Pinia代替Vuex进行数据存储

RuoYi

2022-05-29 44ad220cdd7eb3c967a4ccac0b2e5b0c0e22738e

 src/layout/components/Settings/index.vue

@@ -84,25 +84,28 @@
import axios from 'axios'

import { ElLoading, ElMessage } from 'element-plus'

import { useDynamicTitle } from '@/utils/dynamicTitle'

import useAppStore from '@/store/modules/app'

import useSettingsStore from '@/store/modules/settings'

import usePermissionStore from '@/store/modules/permission'



const { proxy } = getCurrentInstance();

const store = useStore();

const appStore = useAppStore()

const settingsStore = useSettingsStore()

const permissionStore = usePermissionStore()

const showSettings = ref(false);

const theme = ref(store.state.settings.theme);

const sideTheme = ref(store.state.settings.sideTheme);

const storeSettings = computed(() => store.state.settings);

const theme = ref(settingsStore.theme);

const sideTheme = ref(settingsStore.sideTheme);

const storeSettings = computed(() => settingsStore);

const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);



/** 是否需要topnav */

const topNav = computed({

  get: () => storeSettings.value.topNav,

  set: (val) => {

    store.dispatch('settings/changeSetting', {

      key: 'topNav',

      value: val

    })

    settingsStore.changeSetting({ key: 'topNav', value: val })

    if (!val) {

      store.commit("SET_SIDEBAR_ROUTERS", store.state.permission.defaultRoutes);

      appStore.toggleSideBarHide(false);

      permissionStore.setSidebarRouters(permissionStore.defaultRoutes);

    }

  }

})

@@ -110,57 +113,39 @@
const tagsView = computed({

  get: () => storeSettings.value.tagsView,

  set: (val) => {

    store.dispatch('settings/changeSetting', {

      key: 'tagsView',

      value: val

    })

    settingsStore.changeSetting({ key: 'tagsView', value: val })

  }

})

/**是否需要固定头部 */

const fixedHeader = computed({

  get: () => storeSettings.value.fixedHeader,

  set: (val) => {

    store.dispatch('settings/changeSetting', {

      key: 'fixedHeader',

      value: val

    })

    settingsStore.changeSetting({ key: 'fixedHeader', value: val })

  }

})

/**是否需要侧边栏的logo */

const sidebarLogo = computed({

  get: () => storeSettings.value.sidebarLogo,

  set: (val) => {

    store.dispatch('settings/changeSetting', {

      key: 'sidebarLogo',

      value: val

    })

    settingsStore.changeSetting({ key: 'sidebarLogo', value: val })

  }

})

/**是否需要侧边栏的动态网页的title */

const dynamicTitle = computed({

  get: () => storeSettings.value.dynamicTitle,

  set: (val) => {

    store.dispatch('settings/changeSetting', {

      key: 'dynamicTitle',

      value: val

    })

    settingsStore.changeSetting({ key: 'dynamicTitle', value: val })

    // 动态设置网页标题

    useDynamicTitle()

  }

})



function themeChange(val) {

  store.dispatch('settings/changeSetting', {

    key: 'theme',

    value: val

  })

  settingsStore.changeSetting({ key: 'theme', value: val })

  theme.value = val;

}

function handleTheme(val) {

  store.dispatch('settings/changeSetting', {

    key: 'sideTheme',

    value: val

  })

  settingsStore.changeSetting({ key: 'sideTheme', value: val })

  sideTheme.value = val;

}

function saveSetting() {