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........就是一个跨组件修改值