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

store/getters.js

@@ -1,8 +0,0 @@
-const getters = {
-  token: state => state.user.token,
-  avatar: state => state.user.avatar,
-  name: state => state.user.name,
-  roles: state => state.user.roles,
-  permissions: state => state.user.permissions
-}
-export default getters

store/index.js

@@ -1,11 +1,7 @@
-import { createStore } from "vuex"
-import user from '@/store/modules/user'
-import getters from './getters'
+import { createPinia } from 'pinia'
 
-const store = createStore({
-  modules: {
-    user
-  },
-  getters
-})
-export default store
+const pinia = createPinia()
+
+export default pinia
+export { useUserStore } from './modules/user'
+export { useConfigStore } from './modules/config'

store/modules/config.js

@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useConfigStore = defineStore('config', () => {
+  const config = ref()
+  const setConfig = (val) => {
+    config.value = val
+  }
+  return {
+    config,
+    setConfig
+  }
+})

store/modules/user.js

@@ -2,102 +2,116 @@ import config from '@/config'
 import storage from '@/utils/storage'
 import constant from '@/utils/constant'
 import { isHttp, isEmpty } from "@/utils/validate"
-import { login, logout, getInfo } from '@/api/login'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { getInfo, login, logout } from '@/api/login'
+import { getToken, removeToken, setToken } from '@/utils/auth'
 import defAva from '@/static/images/profile.jpg'
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
 
 const baseUrl = config.baseUrl
 
-const user = {
-  state: {
-    token: getToken(),
-    name: storage.get(constant.name),
-    avatar: storage.get(constant.avatar),
-    roles: storage.get(constant.roles),
-    permissions: storage.get(constant.permissions)
-  },
+export const useUserStore = defineStore('user', () => {
+  const token = ref(getToken())
+  const id = ref(storage.get(constant.id))
+  const name = ref(storage.get(constant.name))
+  const avatar = ref(storage.get(constant.avatar))
+  const roles = ref(storage.get(constant.roles))
+  const permissions = ref(storage.get(constant.permissions))
 
-  mutations: {
-    SET_TOKEN: (state, token) => {
-      state.token = token
-    },
-    SET_NAME: (state, name) => {
-      state.name = name
-      storage.set(constant.name, name)
-    },
-    SET_AVATAR: (state, avatar) => {
-      state.avatar = avatar
-      storage.set(constant.avatar, avatar)
-    },
-    SET_ROLES: (state, roles) => {
-      state.roles = roles
-      storage.set(constant.roles, roles)
-    },
-    SET_PERMISSIONS: (state, permissions) => {
-      state.permissions = permissions
-      storage.set(constant.permissions, permissions)
-    }
-  },
-
-  actions: {
-    // 登录
-    Login({ commit }, userInfo) {
-      const username = userInfo.username.trim()
-      const password = userInfo.password
-      const code = userInfo.code
-      const uuid = userInfo.uuid
-      return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
-          setToken(res.token)
-          commit('SET_TOKEN', res.token)
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
-      })
-    },
-
-    // 获取用户信息
-    GetInfo({ commit, state }) {
-      return new Promise((resolve, reject) => {
-        getInfo().then(res => {
-          const user = res.user
-		  let avatar = user.avatar || ""
-		  if (!isHttp(avatar)) {
-            avatar = (isEmpty(avatar)) ? defAva : baseUrl + avatar
-          }
-          const username = (isEmpty(user) || isEmpty(user.userName)) ? "" : user.userName
-		  if (res.roles && res.roles.length > 0) {
-            commit('SET_ROLES', res.roles)
-            commit('SET_PERMISSIONS', res.permissions)
-          } else {
-            commit('SET_ROLES', ['ROLE_DEFAULT'])
-          }
-          commit('SET_NAME', username)
-          commit('SET_AVATAR', avatar)
-          resolve(res)
-        }).catch(error => {
-          reject(error)
-        })
-      })
-    },
-
-    // 退出系统
-    LogOut({ commit, state }) {
-      return new Promise((resolve, reject) => {
-        logout(state.token).then(() => {
-          commit('SET_TOKEN', '')
-          commit('SET_ROLES', [])
-          commit('SET_PERMISSIONS', [])
-          removeToken()
-          storage.clean()
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
-      })
-    }
+  const SET_TOKEN = (val) => {
+    token.value = val
+  }
+  const SET_ID = (val) => {
+    id.value = val
+    storage.set(constant.id, val)
+  }
+  const SET_NAME = (val) => {
+    name.value = val
+    storage.set(constant.name, val)
+  }
+  const SET_AVATAR = (val) => {
+    avatar.value = val
+    storage.set(constant.avatar, val)
+  }
+  const SET_ROLES = (val) => {
+    roles.value = val
+    storage.set(constant.roles, val)
+  }
+  const SET_PERMISSIONS = (val) => {
+    permissions.value = val
+    storage.set(constant.permissions, val)
   }
-}
 
-export default user
+  // 登录
+  const loginAction = (userInfo) => {
+    const username = userInfo.username.trim()
+    const password = userInfo.password
+    const code = userInfo.code
+    const uuid = userInfo.uuid
+    return new Promise((resolve, reject) => {
+      login(username, password, code, uuid).then(res => {
+        setToken(res.token)
+        SET_TOKEN(res.token)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+
+  // 获取用户信息
+  const getInfoAction = () => {
+    return new Promise((resolve, reject) => {
+      getInfo().then(res => {
+        const user = res.user
+        let avatar = user.avatar || ""
+        if (!isHttp(avatar)) {
+          avatar = (isEmpty(avatar)) ? defAva : baseUrl + avatar
+        }
+        const userid = (isEmpty(user) || isEmpty(user.userId)) ? "" : user.userId
+        const username = (isEmpty(user) || isEmpty(user.userName)) ? "" : user.userName
+        if (res.roles && res.roles.length > 0) {
+          SET_ROLES(res.roles)
+          SET_PERMISSIONS(res.permissions)
+        } else {
+          SET_ROLES(['ROLE_DEFAULT'])
+        }
+		SET_ID(userid)
+        SET_NAME(username)
+        SET_AVATAR(avatar)
+        resolve(res)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+
+  // 退出系统
+  const logOutAction = () => {
+    return new Promise((resolve, reject) => {
+      logout(token.value).then(() => {
+        SET_TOKEN('')
+        SET_ROLES([])
+        SET_PERMISSIONS([])
+        removeToken()
+        storage.clean()
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+
+  return {
+    token,
+    id,
+    name,
+    avatar,
+    roles,
+    permissions,
+    SET_AVATAR,
+    login: loginAction,
+    getInfo: getInfoAction,
+    logOut: logOutAction
+  }
+})