前言
最近遇上了一个麻烦，有一个数据，相对于当前用户的信息，可是我所有的页面都需要使用，虽然我可以存储在session会话当中，但是每一次都要从后端获取这个不重要的数据吗？会造成大量的资源浪费！所以去寻找了方法，我在vuex当中找了方法！
一. 安装 Vuex
首先我们需要安装，可以通过npm或者yarn，看情况选择！
npm install vuex@nextyarn add vuex@next二.创建Vuex Store
也就是创建一个文件，通常是创建store.js,放在一个文件目录下确保自己记得，持久化逻辑
以下是示例内容：
// store.js
import { createStore } from 'vuex'; const store = createStore({ state: { phone: localStorage.getItem('phone') || '0', // 从 localStorage 中获取初始值 }, mutations: { setPhone(state, phone) { state.phone = phone; // 更新 phone 值 localStorage.setItem('phone', phone); // 同步到 localStorage }, }, actions: { updatePhone({ commit }, phone) { commit('setPhone', phone); // 提交更改 }, }, getters: { getPhone: (state) => state.phone, // 获取 phone 值 },
}); export default store;三.在Vue当中使用Store
就是在main.js当中，将Vue store注册到Vue示例当中
// main.js
import { createApp } from 'vue';
import App from './App.vue'; // 主组件
import store from './store'; // 引入 Vuex store const app = createApp(App);
app.use(store); // 将 store 添加到 Vue 实例
app.mount('#app');四.在组件中更新公共值
import { useStore } from 'vuex'; // 引入 Vuex store const store = useStore(); // 获取 store 实例
// 更新 Vuex store 中的 phone await store.dispatch('updatePhone', phoneInput.value);
五.获取最新的公共值
import { useStore } from 'vuex'; // 引入 Vuex store const store = useStore(); // 获取 store 实例 const phone = computed(() => store.state.phone); // 计算属性获取 phone 这样所有组件可以通过以上的方法修改和获得公共值了！哪怕是刷新也不怕
