vuex（二）

使用vue开发项目，我希望在用户登录成功之后，使用vuex保存某个值

1、安装 Vuex：如果你的项目还没有安装 Vuex，需要先安装它。
2、创建 Vuex Store：在项目中创建一个 Vuex Store 来管理全局状态。
3、登录成功后保存值到 Vuex：在用户登录成功后，将需要保存的值提交到 Vuex Store。

创建vuex store

在 src 目录下创建一个 store 文件夹，并在其中创建 index.js 文件

import { createStore } from 'vuex'

export default createStore({
    state: {
        tag: null
    },
    mutations: {
        setTag(state, tag) {
            state.tag = tag
        }
    },
    actions: {
        saveTag({ commit }, tag) {
            commit('setTag', tag)
        }
    },
    getters: {
        getTag: state => state.tag
    }
})

在主应用中使用vuex store

在 src/main.js 中引入并使用 Vuex Store：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

用户登录成功之后保存值到vuex

假设你有一个登录组件 Login.vue，在用户登录成功后，将 token 保存到 Vuex 中：

<script>
import axios from "axios";
import { ElNotification } from "element-plus";
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      form: {
        employeeId: "",
        password: "",
      },
    };
  },
  methods: {
    ...mapActions(['saveTag']),
    onEmployeeIdInput() {
      this.form.employeeId = this.form.employeeId.replace(/\D/g, '');
    },
    async submitForm() {
      if (this.form.employeeId && this.form.password) {
        try {
          // 根据实际情况替换为后端API的URL
          const url = '/authentication/login/';
          const response = await axios.post(url, {
            username: this.form.employeeId,
            password: this.form.password,
          });
          // 使用Element UI的Notification组件显示成功通知
          ElNotification({
            type: 'success',
            title: 'Success',
            message: '登录成功,即将跳转到首页',
            duration: 3000, // 通知将在3秒后自动关闭
          });
          localStorage.setItem('authToken', JSON.stringify(response.data));
          // 保存tag的值
          this.saveTag('first');

          // 在通知关闭后跳转到登录页面
          setTimeout(() => {
            this.$router.push('/home'); // 使用实际的登录页面路由
          }, 1000);

        } catch (error) {
          // 检查错误响应的状态码
          if (error.response) {
            if (error.response.status === 400) {
              // 解析错误信息并显示给用户
              // 使用Element Plus的ElNotification组件显示错误通知
              ElNotification({
                type: 'error',
                title: 'Error',
                message: '登录失败',
                duration: 3000, // 通知将在3秒后自动关闭
              });
            } else {
              // 处理其他类型的错误
              alert('An unexpected error occurred. Please try again later.');
            }
          } else {
            // 处理无法连接到服务器等其他错误
            alert('An unexpected error occurred. Please try again later.');
          }
        }
      } else {
        ElNotification({
          type: 'warning',
          title: 'Warning',
          message: '所有字段都是必填项，请确保填写了所有信息。',
          duration: 3000,
        });
      }
    },
  },
};
</script>

在其他组件使用vuex中保存的值

你可以在其他组件中通过 Vuex 的 getTag getter 获取保存的 tag 值。
1、vue2代码风格

<template>
  <div>
    <p>当前 Tag: {{ tag }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['getTag'])
  },
  created() {
    console.log('Tag from Vuex:', this.getTag)
  }
}
</script>

2、vue3代码风格

<script>
import { ElContainer, ElHeader, ElMain, ElFooter, ElRow, ElCol } from "element-plus";
import { ref, onMounted, onUnmounted, provide, computed } from "vue";
import { useStore } from 'vuex';
import HeaderTabs from "@/components/HeaderTabs.vue";
import HomeArticle from "@/components/tabs/HomeArticle.vue";
import MessageBoard from "@/components/tabs/MessageBoard.vue";
import OverView from "@/components/tabs/OverView.vue";
import PageAside from "@/components/main_aside/PageAside.vue";
import FooterPage from "@/components/FooterPage.vue";
import WriteArticle from "@/components/WriteArticle.vue";
import PersonalCenter from "@/components/tabs/PersonalCenter.vue";

export default {
    name: "PageLayout",
    components: {
        ElContainer,
        ElHeader,
        ElMain,
        ElFooter,
        HeaderTabs,
        HomeArticle,
        PageAside,
        MessageBoard,
        OverView,
        ElRow,
        ElCol,
        FooterPage,
        WriteArticle,
        PersonalCenter,
    },

    setup() {
        const store = useStore(); // 获取 Vuex store

        const showHeader = ref(true);

        const handleScroll = (event) => {
            const delta = event.wheelDelta || -event.detail;
            showHeader.value = delta > 0;
        };

        onMounted(() => {
            window.addEventListener("mousewheel", handleScroll, false);
            window.addEventListener("DOMMouseScroll", handleScroll, false);
        });

        onUnmounted(() => {
            window.removeEventListener("mousewheel", handleScroll, false);
            window.removeEventListener("DOMMouseScroll", handleScroll, false);
        });

        const currentComponent = ref("");
        const PageAsideComponent = ref("");

        const updateMainContent = (tabName) => {
            switch (tabName) {
                case "first":
                    currentComponent.value = "HomeArticle";
                    PageAsideComponent.value = "PageAside";
                    break;
                case "second":
                    currentComponent.value = "OverView";
                    break;
                case "third":
                    currentComponent.value = "MessageBoard";
                    break;
                case "fourth":
                    currentComponent.value = "WriteArticle";
                    break;
                case "fifth":
                    currentComponent.value = "PersonalCenter";
                    break;
                default:
                    currentComponent.value = "";
            }
        };

        // 使用 computed 函数获取 Vuex 中的 tag
        const tag = computed(() => store.getters.getTag);

        // 设置默认值
        updateMainContent(tag.value);

        // 使用 provide 函数提供 updateMainContent 方法
        provide('updateMainContent', updateMainContent);

        return {
            showHeader,
            currentComponent,
            updateMainContent,
            PageAsideComponent,
        };
    }
};
</script>