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


Posted in Javascript onNovember 11, 2019

通过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 存储值 在不同界面使用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
js+css实现红包雨效果
Jul 12 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
使用vuex存储用户信息到localStorage的实例
Nov 11 #Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 #Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 #Javascript
vue与django集成打包的实现方法
Nov 11 #Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 #Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 #Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 #jQuery
You might like
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
空指针到底是什么
2012/08/07 面试题
Ajxa常见问题都有哪些
2014/03/26 面试题
出国签证在职证明
2014/01/16 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
文明寄语大全
2014/04/11 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
部门2014年度工作总结
2014/11/12 职场文书
故宫的导游词
2015/01/31 职场文书
2015年保送生自荐信
2015/03/24 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS