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

pages/login.vue

@@ -39,12 +39,12 @@
 </template>
 
 <script setup>
-  import { getCodeImg } from '@/api/login'
-  import store from '@/store'
-  import { ref, getCurrentInstance } from "vue"
+  import { getCodeImg } from '@/api/login'
+  import { useConfigStore, useUserStore } from '@/store'
+  import { ref, getCurrentInstance } from "vue"
 
   const { proxy } = getCurrentInstance()
-  const globalConfig = getApp().globalData.config
+  const globalConfig = useConfigStore().config
   const codeUrl = ref("")
   // 验证码开关
   const captchaEnabled = ref(true)
@@ -101,7 +101,7 @@
 
   // 密码登录
   async function pwdLogin() {
-    store.dispatch('Login', loginForm.value).then(() => {
+    useUserStore().login(loginForm.value).then(() => {
       proxy.$modal.closeLoading()
       loginSuccess()
     }).catch(() => {
@@ -114,7 +114,7 @@
   // 登录成功后，处理函数
   function loginSuccess(result) {
     // 设置用户信息
-    store.dispatch('GetInfo').then(res => {
+    useUserStore().getInfo().then(res => {
       proxy.$tab.reLaunch('/pages/index')
     })
   }

pages/mine/about/index.vue

@@ -43,9 +43,11 @@
   </view>
 </template>
 
-<script setup>
-  const url = getApp().globalData.config.appInfo.site_url
-  const version = getApp().globalData.config.appInfo.version
+<script setup>
+  import { useConfigStore } from '@/store'
+
+  const url = useConfigStore().config.appInfo.site_url
+  const version = useConfigStore().config.appInfo.version
 </script>
 
 <style lang="scss" scoped>

pages/mine/avatar/index.vue

@@ -38,7 +38,7 @@
 
 <script>
   import config from '@/config'
-  import store from "@/store"
+  import { useUserStore } from '@/store'
   import { uploadAvatar } from "@/api/system/user"
   
   const baseUrl = config.baseUrl
@@ -68,7 +68,7 @@
 		 */
 		data() {
 			return {
-				imageSrc: store.getters.avatar,
+				imageSrc: useUserStore().avatar,
 				isShowImg: false,
 				// 初始化的宽高
 				cropperInitW: SCREEN_WIDTH,
@@ -257,7 +257,7 @@
 							uni.hideLoading()
 							let data = {name: 'avatarfile', filePath: res.tempFilePath}
 							uploadAvatar(data).then(response => {
-								store.commit('SET_AVATAR', baseUrl + response.imgUrl)
+								useUserStore().SET_AVATAR(baseUrl + response.imgUrl)
 								uni.showToast({ title: "修改成功", icon: 'success' })
 								uni.navigateBack()
 							})

pages/mine/index.vue

@@ -77,13 +77,12 @@
 </template>
 
 <script setup>
-  import store from '@/store'
+  import { useUserStore } from '@/store'
   import { computed , getCurrentInstance } from "vue"
 
   const { proxy } = getCurrentInstance()
-  const name = store.state.user.name
-  const version= getApp().globalData.config.appInfo.version
-  const avatar = computed(() => store.state.user.avatar)
+  const name = useUserStore().name
+  const avatar = computed(() => useUserStore().avatar)
   const windowHeight = computed(() => uni.getSystemInfoSync().windowHeight - 50)
 
   function handleToInfo() {

pages/mine/setting/index.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script setup>
-  import store from '@/store'
+  import { useUserStore } from '@/store'
   import { ref, computed , getCurrentInstance } from "vue"
 
   const { proxy } = getCurrentInstance()
@@ -51,7 +51,7 @@
 
   function handleLogout() {
     proxy.$modal.confirm('确定注销并退出系统吗？').then(() => {
-      store.dispatch('LogOut').then(() => {}).finally(()=>{
+      useUserStore().logOut().then(() => {}).finally(()=>{
         proxy.$tab.reLaunch('/pages/index')
       })
     })