vuex非父子组件间改值

Posted HHLweb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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非父子组件间改值的主要内容,如果未能解决你的问题,请参考以下文章

Vuex

Vuex

Vuex

Vuex

Vuex入门同步异步 存取值

Vue中的Bus(总线)实现非父子组件通信