vue2專案中調取登入介面登入以後獲取個人資訊以後,儲存在哪裡,怎麼在不同的頁面展示想要的資訊?

在Vue2專案中，可以將個人資訊儲存在Vuex狀態管理中或者瀏覽器的本地儲存中，具體取決於專案的需求和規模。 1. Vuex狀態管理 在Vuex中定義一個user模組，用於儲存使用者資訊，可以在登入成功後將使用者資訊儲存到該模組中。 ```javascript // store/user.js const state = { userInfo: null } const mutations = { setUserInfo(state, userInfo) { state.userInfo = userInfo } } const actions = { login({ commit }, userInfo) { // 呼叫登入介面 // 登入成功後將使用者資訊儲存到Vuex中 commit('setUserInfo', userInfo) } } export default { namespaced: true, state, mutations, actions } ``` 在需要展示使用者資訊的元件中，可以透過Vuex的mapState輔助函式獲取使用者資訊並展示。 ```javascript // components/UserInfo.vue <template> <div> <p>使用者名稱：{{ userInfo.username }}</p> <p>郵箱：{{ userInfo.email }}</p> </div> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState('user', ['userInfo']) } } </script> ``` 2. 瀏覽器的本地儲存 在登入成功後，可以將使用者資訊儲存到瀏覽器的本地儲存中，例如localStorage或sessionStorage。 ```javascript // 登入成功後將使用者資訊儲存到localStorage中 localStorage.setItem('userInfo', JSON.stringify(userInfo)) ``` 在需要展示使用者資訊的元件中，可以透過localStorage獲取使用者資訊並展示。 ```javascript // components/UserInfo.vue <template> <div> <p>使用者名稱：{{ userInfo.username }}</p> <p>郵箱：{{ userInfo.email }}</p> </div> </template> <script> export default { computed: { userInfo() { return JSON.parse(localStorage.getItem('userInfo')) } } } </script> ``` 需要注意的是，使用瀏覽器的本地儲存儲存使用者資訊存在安全風險，因此需要對使用者資訊進行加密處理。同時，如果使用者資訊需要在多個頁面中展示，建議使用Vuex狀態管理。