zoukankan      html  css  js  c++  java
  • 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........就是一个跨组件修改值

  • 相关阅读:
    LeetCode:数组(三)
    LeetCode:数组(二)
    LeetCode:数组(一)
    python实现栈的基本操作
    python基本内置函数
    Pycharm的常见Debug调试方法(持续更新)
    计算广告系列(一)-基本概念整理
    es与solr对比
    数据库优化
    java线程池
  • 原文地址:https://www.cnblogs.com/hhweb/p/6928472.html
Copyright © 2011-2022 走看看