在项目中如何使用vuex实现数据共享（二）_vue不是一个项目的store怎么共享-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43021174/article/details/85010767

本文详细介绍了如何在Vue项目中使用Vuex进行状态管理，并结合本地存储(localStorage)保存和读取数据，确保应用在刷新后仍能保持状态。通过拆分文件，实现了state、actions和mutations的模块化管理，提高了代码的可维护性和可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果使用本地存储的话最好用try catch 包起来

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

let defaultCity = '北京';
try {
  if (localStorage.city) {
    defaultCity = localStorage.city;
  }
} catch (e) {}
export default new Vuex.Store({
  state: {
    city: defaultCity,
  },
  actions: {
    // 两个参数
    // 上下文
    // 传过来的数据
    changeCity(ctx, city) {
      ctx.commit('changeCity', city);
    },
  },
  mutations: {
    changeCity(state, city) {
      this.state.city = city;
      try {
        localStorage.city = city;
      } catch (e) {}
    },
  },
});

然后我们拆分文件

在这里插入图片描述

state.js

let defaultCity = '北京';
try {
  if (localStorage.city) {
    defaultCity = localStorage.city;
  }
} catch (e) {}
export default {
  city: defaultCity,
};

actions.js

export default {
  // 两个参数
  // 上下文
  // 传过来的数据
  changeCity(ctx, city) {
    ctx.commit('changeCity', city);
  },
};

mutations.js

export default {
  changeCity(state, city) {
    this.state.city = city;
    try {
      localStorage.city = city;
    } catch (e) {}
  },
};

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import state from './state';
import mutations from './mutations';
import actions from './actions';

Vue.use(Vuex);


export default new Vuex.Store({
  state,
  actions,
  mutations,
});

我们之前需要使用很长一段代码去使用state里面的数据 {{this.$store.state.city}}
vuex为我们提供了很方便的

import {mapState} from 'vuex';


computed: {
...mapState(['city'])
}

// 如何使用
    {{this.city}}

path: ‘/’,
name: ‘home’
component: ()=>import(’@/pages/Home’)