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 存储值 在不同界面使用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文详细介绍了如何在计算机上安装和配置Node.js,包括下载Node.js,验证安装成功,配置npm的全局模块目录和缓存目录,设置环境变量,配置npm镜像,安装Vue.js等步骤,通过这些指导,你可以在IDEA上成功创建和运行Vue项目2024-10-10
这篇文章主要为大家详细介绍了vue router路由嵌套不显示的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下vue-router 路由嵌套不显示问题2017-06-06
vue-router 按需加载 component: () => import() 报错的解决
这篇文章主要介绍了vue-router 按需加载 component: () => import() 报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本文将探讨动态组件加载失败的常见原因,并提供排查与解决方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
今天小编就为大家分享一篇vue中当图片地址无效的时候,显示默认图片的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最近入职了新公司,接手了一个新拆分出来的Vue项目,针对该项目做了个打包优化,下面这篇文章主要给大家介绍了关于Vue项目中打包优化的四种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
Vue-Access-Control 前端用户权限控制解决方案
Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案。这篇文章主要介绍了Vue-Access-Control：前端用户权限控制解决方案,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了Vue3 reactive响应式赋值页面不渲染的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
在Vue3.5版本中最大的改动就是响应式重构,重构后性能竟然炸裂的提升了56%,本文我们来讲讲使用双向链表后,Vue内部是如何实现依赖收集和依赖触发的,感兴趣的可以了解下2024-11-11
本文给大家详细讲述了Vue2.0中集成UEditor富文本编辑器的方法以及相关注意事项做了讲述，有兴趣的朋友学习下。2018-03-03
最新评论