前言

        最近遇上了一个麻烦，有一个数据，相对于当前用户的信息，可是我所有的页面都需要使用，虽然我可以存储在session会话当中，但是每一次都要从后端获取这个不重要的数据吗？会造成大量的资源浪费！所以去寻找了方法，我在vuex当中找了方法！

一. 安装 Vuex

首先我们需要安装，可以通过npm或者yarn，看情况选择！

npm install vuex@next

yarn 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 

这样所有组件可以通过以上的方法修改和获得公共值了！哪怕是刷新也不怕