vuex非父子组件间改值

Posted 2020-09-20 HHLweb

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