vuex在vue-cli中的使用方法

前端小问题

于 2021-11-25 17:40:04 发布

阅读量310

点赞数

分类专栏： vuex 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_43989837/article/details/121543151

版权

vuex 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装和配置Vuex来管理全局状态，并利用vuex-persistedstate插件实现状态持久化，确保用户信息在刷新页面后仍然保留。步骤包括安装Vuex和相关插件，创建store目录，定义state、mutations和plugins，最后在main.js中引入并使用。在组件中，通过提交mutations更新经纬度，并从state中获取用户信息。

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

1，安装npm install vuex --save
2，创建单独的文件夹用于集中管理vuex中的数据（store文件夹跟src文件夹同级）
在这里插入图片描述
3.store下index中的代码如下

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userinfor:{
      longitude:"116.211489",//百度地图经纬度
      latitude:"39.995907",
    },
    menus:{ //菜单中的存储
    }
  },
  mutations: {
    // 将经纬度放入store
    changeLocal(state, localdata){
      state.userinfor.longitude = localdata.longitude;
      state.userinfor.latitude = localdata.latitude;
    }
  },
  plugins:[
    createPersistedState({
      storage:window.sessionStorage,
      reducer(val){
        return {
          userinfor:val.userinfor
        }
      }
    }),
  ]
  
  // this.$store.commit('changeLocal',{longitude:"116.211489",latitude:"39.995907",});//清除缓存
})


export default store

4，在main。js中引入
在这里插入图片描述
5，要在实例中使用你书写的js。

6.在需要的地方通过提交mutations更改store中的值。
this.$store.commit(‘changeLocal’,{longitude:“116.211489”,latitude:“39.995907”});