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

  • 相关阅读:
    CAN总线学习资料
    VMware虚拟机 硬盘空间不足 磁盘大小调整方案
    郭天祥-S3C2440开发板Linux2.6.31移植教程
    MFC串口编程——使用标准SerialCom类
    Luogu P2602 [ZJOI2010]数字计数 //数位DP
    luogu P1896 [SCOI2005] 互不侵犯 //状压DP
    中北大学ACM 5/12 T6 CSY的幸福
    P2473 || SCOI2008 奖励关 //状压&&期望DP
    请让蝴蝶爬满全身
    【图论】二分图 // 未完成 =、=
  • 原文地址:https://www.cnblogs.com/hhweb/p/6928472.html
Copyright © 2011-2022 走看看