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

src/views/login.vue

@@ -68,8 +68,9 @@
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from "@/utils/jsencrypt";
+import useUserStore from '@/store/modules/user'
 
-const store = useStore();
+const userStore = useUserStore()
 const router = useRouter();
 const { proxy } = getCurrentInstance();
 
@@ -111,7 +112,7 @@ function handleLogin() {
         Cookies.remove("rememberMe");
       }
       // 调用action的登录方法
-      store.dispatch("Login", loginForm.value).then(() => {
+      userStore.login(loginForm.value).then(() => {
         router.push({ path: redirect.value || "/" });
       }).catch(() => {
         loading.value = false;

src/views/system/user/profile/userAvatar.vue

@@ -54,8 +54,9 @@
 import "vue-cropper/dist/index.css";
 import { VueCropper } from "vue-cropper";
 import { uploadAvatar } from "@/api/system/user";
+import useUserStore from '@/store/modules/user'
 
-const store = useStore();
+const userStore = useUserStore()
 const { proxy } = getCurrentInstance();
 
 const open = ref(false);
@@ -64,7 +65,7 @@ const title = ref("修改头像");
 
 //图片裁剪数据
 const options = reactive({
-  img: store.getters.avatar, // 裁剪图片的地址
+  img: userStore.avatar, // 裁剪图片的地址
   autoCrop: true, // 是否默认生成截图框
   autoCropWidth: 200, // 默认生成截图框宽度
   autoCropHeight: 200, // 默认生成截图框高度
@@ -116,7 +117,7 @@ function uploadImg() {
     uploadAvatar(formData).then(response => {
       open.value = false;
       options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl;
-      store.commit("SET_AVATAR", options.img);
+      userStore.avatar = options.img;
       proxy.$modal.msgSuccess("修改成功");
       visible.value = false;
     });
@@ -128,7 +129,7 @@ function realTime(data) {
 };
 /** 关闭窗口 */
 function closeDialog() {
-  options.img = store.getters.avatar;
+  options.img = userStore.avatar;
   options.visible = false;
 };
 </script>