首页 > 代码库 > vuex非父子组件间改值
vuex非父子组件间改值
最近在用vue写单页面项目嘛,然后就有遇到这问题啦,看了很多参考,要么繁琐的一塌糊涂,要么就是传值并不是改值,下面我述说下方法,最清晰的简单demo
父子间用props
非父子间用vuex
store(store/index.js)
state: { x:66 }, mutations:{ add:function(state,x){//这边的x来自于a.vue state.x=1+state.x; } }.........
a.vue
先引用过来store(import { store } from ‘../store‘;新手来说会被多种花样弄晕,还有import * as store form ......)
data x:store.state.x
然后这只是初始化话绑定,并不是一直绑定的
所以,在执行动作时,要执行
console.log(this.x);//66 this.$store.commit(‘add‘); this.x=store.state.x; console.log(this.x);//67
就相当于到store的x处理了下,怎么处理就自己想怎么弄就怎么弄了,然后到b.vue
b要修改a的x呢?
咋整,还是改不了,因为a的x不是实时绑定store的x的
然后我这么整,将a的this传过去到store,在store里处理了a的x,居然有效果的
this.$store.commit(‘add‘,this);//将this对象传到store那去 //this.x=store.state.x;
store add:function(state,x){//x-a传过来的this state.x=1+state.x; x.x=state.x; // ====this.x=store.state.x;(a里面的) }
好了,the problem has solved
既然a的x处理在store里面,然后在store里面在a调用store的add时把a的this留在store里面嘛,
store state: { x:66, home:‘‘ },...........
add改成: add:function(state,x){ state.x=1+state.x; x.x=state.x; state.home=x;//留住a的this },
然后store里新加个方法,给b用的
back:function(state){ state.x--; state.home.x=state.x; }
b
this.$store.commit(‘back‘);
好了,经测试ok的,没有用到那么多的getters,mutations........就是一个跨组件修改值
vuex非父子组件间改值
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。