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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
在js中修改html body的样式
Nov 11 Javascript
使用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
PHP新手上路(八)
2006/10/09 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
vue form check 表单验证的实现代码
2018/12/09 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Python做文本按行去重的实现方法
2016/10/19 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
python3 深浅copy对比详解
2019/08/12 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
医学生求职自荐信
2013/10/25 职场文书
医学生自我鉴定范文
2013/11/08 职场文书
委托证明的格式
2014/01/10 职场文书
领导调研接待方案
2014/02/27 职场文书
协议书格式
2014/04/23 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
岗位聘任报告
2015/03/02 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
小平小道观后感
2015/06/09 职场文书
最美乡村教师观后感
2015/06/11 职场文书
美容院员工规章制度
2015/08/05 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP