feat: 修改vuex为pinia

修改vuex为pinia
This commit is contained in:
zc
2021-12-25 13:26:12 +08:00
parent d53c13ecba
commit 41cba750b5
17 changed files with 179 additions and 239 deletions

View File

@@ -1,9 +1,3 @@
import type { App } from "vue";
import { createPinia } from "pinia";
const store = createPinia();
export function setupStore(app: App<Element>) {
app.use(store);
}
export { store };

View File

@@ -1,12 +1,7 @@
// import {Module} from "vuex";
import {AppState} from "@store/interface";
import {Local} from "@utils/storage";
// import { storageLocal } from "/@/utils/storage";
import { store } from "@/store";
// import { appType } from "./types";
import { defineStore } from "pinia";
// import { getConfig } from "/@/config";
export const useAppStore = defineStore({
id: "youlai-app",
@@ -18,34 +13,24 @@ export const useAppStore = defineStore({
}
}),
actions: {
async TOGGLE_SIDEBAR(state:any) {
state.sidebar.opened = !state.sidebar.opened
console.log('state.sidebar.opened',state.sidebar.opened)
state.sidebar.withoutAnimation = false
if (state.sidebar.opened) {
toggleSidebar() {
this.sidebar.opened = !this.sidebar.opened
this.sidebar.withoutAnimation = false
if (this.sidebar.opened) {
Local.set('sidebarStatus', 1)
} else {
Local.set('sidebarStatus', 0)
}
},
async CLOSE_SIDEBAR (state:any, withoutAnimation:any) {
closeSideBar ( withoutAnimation:any) {
Local.set('sidebarStatus', 0)
state.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation
this.sidebar.opened = false
this.sidebar.withoutAnimation = withoutAnimation
},
async TOGGLE_DEVICE(state:any, device:any) {
toggleDevice( device:any) {
console.log('TOGGLE_DEVICE',device)
state.device = device
},
// toggleSideBar({commit}) {
// commit('TOGGLE_SIDEBAR')
// },
// closeSideBar({commit}, {withoutAnimation}) {
// commit('CLOSE_SIDEBAR', withoutAnimation)
// },
// async toggleDevice({commit}, device) {
// commit('TOGGLE_DEVICE', device)
// }
this.device = device
}
}
})
export function useAppStoreHook() {

View File

@@ -1,5 +1,4 @@
// import {Module} from "vuex";
import {PermissionState, RootStateTypes} from "@store/interface";
import {PermissionState} from "@store/interface";
import {RouteRecordRaw} from 'vue-router'
import {constantRoutes} from '@/router'
import {listRoutes} from "@/api/system/menu";
@@ -53,7 +52,7 @@ export const usePermissionStore = defineStore({
addRoutes: []
}),
actions: {
async SET_ROUTES( routes: RouteRecordRaw[]){
setRoutes( routes: RouteRecordRaw[]){
this.addRoutes = routes
this.routes = constantRoutes.concat(routes)
},
@@ -67,7 +66,7 @@ export const usePermissionStore = defineStore({
} else {
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}
this.SET_ROUTES(accessedRoutes)
this.setRoutes(accessedRoutes)
resolve(accessedRoutes)
}).catch(error => {
reject(error)

View File

@@ -1,7 +1,6 @@
import { defineStore } from "pinia";
import { store } from "@/store";
// import {Module} from "vuex";
import {SettingState, RootStateTypes} from "@store/interface";
import {SettingState} from "@store/interface";
import defaultSettings from '../../settings'
const {showSettings, tagsView, fixedHeader, sidebarLogo} = defaultSettings
@@ -16,7 +15,7 @@ export const useSettingStore = defineStore({
sidebarLogo: sidebarLogo,
}),
actions: {
async CHANGE_SETTING( payload: { key: string, value: any }){
async changeSetting( payload: { key: string, value: any }){
const {key, value} = payload
switch (key) {
case 'theme':
@@ -37,9 +36,6 @@ export const useSettingStore = defineStore({
default:
break
}
},
changeSetting(data:any) {
this.CHANGE_SETTING(data)
}
}
})

View File

@@ -1,8 +1,7 @@
import { defineStore } from "pinia";
import { store } from "@/store";
// import {Module} from "vuex";
import {TagsViewState,RootStateTypes} from "@store/interface";
import {TagsViewState} from "@store/interface";
const tagsViewStore=defineStore({
id:"youlai-tagsView",
@@ -11,7 +10,7 @@ const tagsViewStore=defineStore({
cachedViews: []
}),
actions: {
async ADD_VISITED_VIEW ( view:any) {
addVisitedView ( view:any) {
if (this.visitedViews.some(v => v.path === view.path)) return
this.visitedViews.push(
Object.assign({}, view, {
@@ -19,51 +18,58 @@ const tagsViewStore=defineStore({
})
)
},
async ADD_CACHED_VIEW(view:any) {
addCachedView(view:any) {
if (this.cachedViews.includes(view.name)) return
if (!view.meta.noCache) {
this.cachedViews.push(view.name)
}
},
async DEL_VISITED_VIEW( view:any) {
for (const [i, v] of this.visitedViews.entries()) {
if (v.path === view.path) {
this.visitedViews.splice(i, 1)
break
}
}
delVisitedView( view:any) {
return new Promise(resolve => {
for (const [i, v] of this.visitedViews.entries()) {
if (v.path === view.path) {
this.visitedViews.splice(i, 1)
break
}
}
resolve([...this.visitedViews])
})
},
async DEL_CACHED_VIEW ( view:any) {
const index = this.cachedViews.indexOf(view.name)
index > -1 && this.cachedViews.splice(index, 1)
delCachedView ( view:any) {
return new Promise(resolve => {
const index = this.cachedViews.indexOf(view.name)
index > -1 && this.cachedViews.splice(index, 1)
resolve([...this.cachedViews])
})
},
async DEL_OTHERS_VISITED_VIEWS (view:any) {
this.visitedViews = this.visitedViews.filter(v => {
return v.meta?.affix || v.path === view.path
})
delOthersVisitedViews (view:any) {
return new Promise(resolve => {
this.visitedViews = this.visitedViews.filter(v => {
return v.meta?.affix || v.path === view.path
})
resolve([...this.visitedViews])
})
},
async DEL_OTHERS_CACHED_VIEWS( view:any) {
const index = this.cachedViews.indexOf(view.name)
if (index > -1) {
this.cachedViews = this.cachedViews.slice(index, index + 1)
} else {
// if index = -1, there is no cached tags
this.cachedViews = []
}
delOthersCachedViews( view:any) {
return new Promise(resolve => {
const index = this.cachedViews.indexOf(view.name)
if (index > -1) {
this.cachedViews = this.cachedViews.slice(index, index + 1)
} else {
// if index = -1, there is no cached tags
this.cachedViews = []
}
resolve([...this.cachedViews])
})
},
DEL_ALL_VISITED_VIEWS() {
// keep affix tags
const affixTags = this.visitedViews.filter(tag => tag.meta?.affix)
this.visitedViews = affixTags
},
DEL_ALL_CACHED_VIEWS() {
this.cachedViews = []
},
UPDATE_VISITED_VIEW (view:any) {
updateVisitedView (view:any) {
for (let v of this.visitedViews) {
if (v.path === view.path) {
v = Object.assign(v, view)
@@ -72,15 +78,9 @@ const tagsViewStore=defineStore({
}
},
addView( view:any) {
this.addVisitedView( view)
this.addVisitedView( view)
this.addCachedView(view)
},
addVisitedView( view:any) {
this.ADD_VISITED_VIEW( view)
},
addCachedView( view:any) {
this.ADD_CACHED_VIEW(view)
},
delView( view:any) {
return new Promise(resolve => {
this.delVisitedView(view)
@@ -91,18 +91,6 @@ const tagsViewStore=defineStore({
})
})
},
delVisitedView( view:any) {
return new Promise(resolve => {
this.DEL_VISITED_VIEW( view)
resolve([...this.visitedViews])
})
},
delCachedView( view:any) {
return new Promise(resolve => {
this.DEL_CACHED_VIEW(view)
resolve([...this.cachedViews])
})
},
delOthersViews( view:any) {
return new Promise(resolve => {
this.delOthersVisitedViews(view)
@@ -113,23 +101,11 @@ const tagsViewStore=defineStore({
})
})
},
delOthersVisitedViews( view:any) {
return new Promise(resolve => {
this.DEL_OTHERS_VISITED_VIEWS(view)
resolve([...this.visitedViews])
})
},
delOthersCachedViews( view:any) {
return new Promise(resolve => {
this.DEL_OTHERS_CACHED_VIEWS(view)
resolve([...this.cachedViews])
})
},
delAllViews( view:any) {
return new Promise(resolve => {
this.delAllVisitedViews()
this.delAllCachedViews()
const affixTags = this.visitedViews.filter(tag => tag.meta?.affix)
this.visitedViews = affixTags
this.cachedViews = []
resolve({
visitedViews: [...this.visitedViews],
cachedViews: [...this.cachedViews]
@@ -138,19 +114,17 @@ const tagsViewStore=defineStore({
},
delAllVisitedViews() {
return new Promise(resolve => {
this.DEL_ALL_VISITED_VIEWS
const affixTags = this.visitedViews.filter(tag => tag.meta?.affix)
this.visitedViews = affixTags
resolve([...this.visitedViews])
})
},
delAllCachedViews() {
return new Promise(resolve => {
this.DEL_ALL_CACHED_VIEWS
this.cachedViews = []
resolve([...this.cachedViews])
})
},
updateVisitedView( view:any) {
this.UPDATE_VISITED_VIEW(view)
}
}
})

View File

@@ -27,24 +27,8 @@ export const useUserStore = defineStore({
}),
actions: {
async RESET_STATE () {
// Object.assign(this.state, getDefaultState())
this.$reset()
},
async SET_TOKEN(token: string) {
this.token = token
},
async SET_NICKNAME( nickname: string) {
this.nickname = nickname
},
async SET_AVATAR(avatar: string) {
this.avatar = avatar
},
async SET_ROLES(roles: string[]) {
this.roles = roles
},
async SET_PERMS( perms: string[]) {
this.perms = perms
},
/**
* 用户登录请求
* @param userInfo 登录用户信息
@@ -68,7 +52,7 @@ export const useUserStore = defineStore({
const {access_token, token_type} = response.data
const accessToken = token_type + " " + access_token
Local.set("token", accessToken)
this.SET_TOKEN(accessToken)
this.token = accessToken
resolve(access_token)
}).catch(error => {
reject(error)
@@ -85,16 +69,14 @@ export const useUserStore = defineStore({
if (!data) {
return reject('Verification failed, please Login again.')
}
console.log(data)
const {nickname, avatar, roles, perms} = data
if (!roles || roles.length <= 0) {
reject('getUserInfo: roles must be a non-null array!')
}
this.SET_NICKNAME(nickname)
this.SET_AVATAR( avatar)
this.SET_ROLES( roles)
this.SET_PERMS( perms)
this.nickname = nickname
this.avatar = avatar
this.roles = roles
this.perms = perms
resolve(data)
}).catch(error => {
reject(error)