feat: user模块的pinia迁移 (#315)

web/package.json

@@ -27,6 +27,7 @@
     "moment": "^2.29.4",
     "nanoid": "^5.0.7",
     "node-forge": "^1.3.1",
+    "pinia": "^2.1.7",
     "qrcode": "^1.5.3",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",

web/src/management/api/base.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
-import store from '@/management/store/index'
 import router from '@/management/router/index'
 import { get as _get } from 'lodash-es'
+import { useUserStore } from '../stores/user'
 
 export const CODE_MAP = {
   SUCCESS: 200,
@@ -36,8 +36,9 @@ instance.interceptors.response.use(
 )
 
 instance.interceptors.request.use((config) => {
-  const hasLogined = _get(store, 'state.user.hasLogined')
-  const token = _get(store, 'state.user.userInfo.token')
+  const userStore = useUserStore()
+  const hasLogined = _get(userStore, 'hasLogined')
+  const token = _get(userStore, 'userInfo.token')
   if (hasLogined && token) {
     if (!config.headers) {
       config.headers = {}

web/src/management/main.js

@@ -1,14 +1,17 @@
 import { createApp } from 'vue'
 import store from './store'
+import { createPinia } from 'pinia'
 import plainText from './directive/plainText'
 import safeHtml from './directive/safeHtml'
 
 import App from './App.vue'
 import router from './router'
 
+const pinia = createPinia()
 const app = createApp(App)
 
 app.use(store)
+app.use(pinia)
 app.use(router)
 
 app.use(plainText)

web/src/management/pages/list/components/MemberSelect.vue

@@ -23,7 +23,6 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { useStore } from 'vuex'
 import MemberList from './MemberList.vue'
 import { getUserList } from '@/management/api/space'
 import {
@@ -33,8 +32,9 @@ import {
   roleLabels
 } from '@/management/utils/types/workSpace'
 import { CODE_MAP } from '@/management/api/base'
+import { useUserStore } from '@/management/stores/user'
 
-const store = useStore()
+const userStore = useUserStore()
 const props = withDefaults(
   defineProps<{
     members?: IMember[]
@@ -65,7 +65,7 @@ const remoteMethod = async (query: string) => {
     if (res.code === CODE_MAP.SUCCESS) {
       selectOptions.value = res.data.map((item: any) => {
         // 不可以选中自己
-        const currentUser = item.username === store.state.user.userInfo.username
+        const currentUser = item.username === userStore.userInfo.username
         return {
           value: item.userId,
           label: item.username,

web/src/management/pages/list/index.vue

@@ -67,11 +67,12 @@ import SpaceList from './components/SpaceList.vue'
 import SliderBar from './components/SliderBar.vue'
 import SpaceModify from './components/SpaceModify.vue'
 import { SpaceType } from '@/management/utils/types/workSpace'
-
+import { useUserStore } from '@/management/stores/user'
 const store = useStore()
+const userStore = useUserStore()
 const router = useRouter()
 const userInfo = computed(() => {
-  return store.state.user.userInfo
+  return userStore.userInfo
 })
 const loading = ref(false)
 const surveyList = computed(() => {
@@ -152,7 +153,7 @@ const onCreate = () => {
   router.push('/create')
 }
 const handleLogout = () => {
-  store.dispatch('user/logout')
+  userStore.logout()
   router.replace({ name: 'login' })
 }
 </script>

web/src/management/pages/login/LoginPage.vue

@@ -57,7 +57,6 @@
 
 <script setup lang="ts">
 import { onMounted, ref, reactive } from 'vue'
-import { useStore } from 'vuex'
 import { useRoute, useRouter } from 'vue-router'
 
 import { ElMessage } from 'element-plus'
@@ -66,8 +65,8 @@ import 'element-plus/theme-chalk/src/message.scss'
 import { login, register } from '@/management/api/auth'
 import { refreshCaptcha as refreshCaptchaApi } from '@/management/api/captcha'
 import { CODE_MAP } from '@/management/api/base'
+import { useUserStore } from '@/management/stores/user'
 
-const store = useStore()
 const route = useRoute()
 const router = useRouter()
 
@@ -150,7 +149,8 @@ const submitForm = (type: 'login' | 'register') => {
           ElMessage.error(res.errmsg)
           throw new Error('登录/注册失败' + res.errmsg)
         }
-        store.dispatch('user/login', {
+        const userStore = useUserStore()
+        userStore.login({
           username: res.data.username,
           token: res.data.token
         })

web/src/management/router/index.ts

@@ -5,6 +5,7 @@ import { SurveyPermissions } from '@/management/utils/types/workSpace'
 import { analysisTypeMap } from '@/management/config/analysisConfig'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
+import { useUserStore } from '@/management/stores/user'
 
 const routes: RouteRecordRaw[] = [
   {
@@ -156,10 +157,11 @@ const router = createRouter({
 })
 
 router.beforeEach(async (to, from, next) => {
-  const store = useStore();
+  const store = useStore()
+  const userStore = useUserStore()
   // 初始化用户信息
-  if (!store.state.user?.initialized) {
-    await store.dispatch('user/init');
+  if (!userStore?.initialized) {
+    await userStore.init();
   }
   // 更新页面标题
   if (to.meta.title) {
@@ -174,7 +176,8 @@ router.beforeEach(async (to, from, next) => {
 });
 
 async function handleLoginGuard(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext, store: Store<any>) {
-  if (store.state.user?.hasLogined) {
+  const userStore = useUserStore();
+  if (userStore?.hasLogined) {
     await handlePermissionsGuard(to, from, next, store);
   } else {
     next({

web/src/management/store/index.js

@@ -1,6 +1,6 @@
 import { createStore } from 'vuex'
 import edit from './edit'
-import user from './user'
+// import user from './user'
 import list from './list'
 import actions from './actions'
 import mutations from './mutations'
@@ -13,7 +13,7 @@ export default createStore({
   actions,
   modules: {
     edit,
-    user,
+    // user,
     list
   }
 })

web/src/management/stores/user.js

@@ -0,0 +1,51 @@
+// Pinia Store
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+
+const USER_INFO_KEY = 'surveyUserInfo'
+export const useUserStore = defineStore('user', () => {
+  const userInfo = ref({
+    username: '',
+    token: ''
+  })
+  const hasLogined = ref(false)
+  const loginTime = ref(null)
+  const initialized = ref(false)
+
+  const init = () => {
+    const localData = localStorage.getItem(USER_INFO_KEY)
+    if (localData) {
+      try {
+        const { userInfo: info, loginTime } = JSON.parse(localData)
+        if (Date.now() - loginTime > 7 * 3600000) {
+          localStorage.removeItem(USER_INFO_KEY)
+        } else {
+          login(info)
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    }
+    initialized.value = true
+  }
+  const login = (data) => {
+    userInfo.value = data
+    hasLogined.value = true
+    loginTime.value = Date.now()
+    localStorage.setItem(
+      USER_INFO_KEY,
+      JSON.stringify({
+        userInfo: data,
+        loginTime: loginTime
+      })
+    )
+  }
+  const logout = () =>  {
+    userInfo.value = null
+    hasLogined.value = false
+    localStorage.removeItem(USER_INFO_KEY)
+  }
+
+  return { userInfo, hasLogined, loginTime, initialized, init, login, logout }
+})

web/src/render/main.js

@@ -3,14 +3,19 @@ import App from './App.vue'
 import EventBus from './utils/eventbus'
 import router from './router'
 import store from './store'
+import { createPinia } from 'pinia'
+
 
 const app = createApp(App)
+const pinia = createPinia()
 
 const $bus = new EventBus()
 app.provide('$bus', $bus)
 // 挂载到this上
 app.config.globalProperties.$bus = $bus
-app.use(router)
 app.use(store)
+app.use(pinia)
+app.use(router)
+
 
 app.mount('#app')

web/src/render/pages/IndexPage.vue

@@ -11,7 +11,6 @@ import useCommandComponent from '../hooks/useCommandComponent'
 
 import AlertDialog from '../components/AlertDialog.vue'
 import { initRuleEngine } from '@/render/hooks/useRuleEngine.js'
-
 const store = useStore()
 const route = useRoute()
 const loadData = (res: any, surveyPath: string) => {

web/src/render/store/actions.js

@@ -58,7 +58,6 @@ export default {
     }
     router.push({ name: 'renderPage' })
 
-
     // 根据初始的schema生成questionData, questionSeq, rules, formValues, 这四个字段
     const { questionData, questionSeq, rules, formValues } = adapter.generateData({
       bannerConf,