vue 实现通过vuex 存储值在不同界面使用

更新时间：2019年11月11日 15:57:46 作者：c230704

今天小编就为大家分享一篇vue 实现通过vuex 存储值在不同界面使用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

通过vuex 存储

1. 创建store.js文件

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);


const state = { //要设置的全局访问的state对象
  count: 1,
  //要设置的初始属性值
  fid: '' //要在登录页面的记录 的fid
};

const mutations = {
  add(state, sum) { //同上，这里面的参数除了state之外还传了需要增加的值sum
    state.count += sum;
  },
  upfid(state, fid) {
    state.fid = fid
  }

};
const actions = {
  add(context, num) { //同上注释，num为要变化的形参
    context.commit('add', num)
  },
  upfid(context, fid) {
   context.fid = fid
  }
};
const store = new Vuex.Store({
  state,
  actions,
  mutations
});

export default store

2. 保存fid这个值

this.$store.dispatch('upfid',this.fid)//保存fid

3, 在其他页面获取fid 这个值

<p>页面上获得{{city}}</p> 


 data () {
  return {
   fid:this.city//js中得到fid
  }
 },
 computed:{//必须
  city(){
   return this.$store.state.fid
  }
 },

以上这篇vue 实现通过vuex 存储值在不同界面使用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue如何解决数据加载时,插值表达式闪烁问题
这篇文章主要介绍了vue如何解决数据加载时,插值表达式闪烁问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-01-01
Vue结合Openlayers使用Overlay添加Popup弹窗实现
本文主要介绍了Vue结合Openlayers使用Overlay添加Popup弹窗实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
解决element-ui库的el-row的gutter=10间距失效问题
这篇文章主要介绍了解决element-ui库的el-row的gutter=10间距失效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
Element中table组件按照属性执行合并操作详解
在我们日常开发中，表格业务基本是必不可少的，对于老手来说确实简单，家常便饭罢了，但是对于新手小白如何最快上手搞定需求呢？本文从思路开始着手，帮你快速搞定表格
2022-11-11
element validate验证函数不执行的原因分析
这篇文章主要介绍了element validate验证函数不执行的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
Vue 插件及浏览器本地存储
这篇文章主要介绍了Vue 插件及浏览器本地存储，插件通常用来为Vue添加全局功能，包含install方法的一个对象。更多相关介绍，需要的小伙伴可以参考下面文章内容
2022-05-05
vue项目运行时出现It works的问题解决
本文主要介绍了vue项目运行时出现It works的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
vue+element多选级联选择器自定义props使用详解
这篇文章主要给大家介绍了关于vue+element多选级联选择器自定义props使用的相关资料,级联选择器展示的结果都是以数组的形式展示,也就是v-model绑定的结果,需要的朋友可以参考下
2023-07-07
vue+elementui通用弹窗的实现(新增+编辑)
这篇文章主要介绍了vue+elementui通用弹窗的实现(新增+编辑)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
Vue3 企业级组件库框架搭建 pnpm monorepo实战示例
这篇文章主要为大家介绍了Vue3 企业级组件库框架搭建 pnpm monorepo实战示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11