zoukankan      html  css  js  c++  java
  • 在Vuex更新,组件内的视图更新问题

    由于js的限制,vue无法进行监听数组;

    • 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
    • 当你修改数组的长度时,例如: vm.items.length = newLength
    • 直接给对象赋值新属性

    解决方式:
    Vue.set( target, key, value )

    测试代码:

    Store的代码:

    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
      state: {
        TestArr: [1,2,5],
        TestObj:{   name:'YK'  }
      },
      getters: {
        TestArr_getters: state => {
          return state.TestArr
        }
      },
      mutations: {
        changeTestArr(state, obj) {
           //state.TestArr[2]=3 
            //上面是错误演示,会改变值,但视图不会更新,在组件内同理
            Vue.set(state.TestArr,2,3) //正确演示
    
            // state.TestObj.age=11 
           //上面是错误演示,会改变值,但视图不会更新,在组件内同理
            Vue.set(state.TestObj,'age',11)//正确演示
        }
      },
      actions: {
        changeTestArr_action(context){
          setTimeout(function () {
            context.commit('changeTestArr')
          }, 1000)
        }
      }
    });
    

    组件内的代码:

    <template>
        <div>
                  <p>state的值:{{$store.state.TestArr}}</p>
                  <p>getterste的值:{{TestArr_getters}}</p>
                <p>TestObj的值:{{TestObj}}</p>
                <button @click="fun1">改变</button>
        </div>
    </template>
    <script>
      import {mapGetters,mapState} from 'vuex'
        export default {
          name: '',
          computed:{
            ...mapState(['TestObj']),
            ...mapGetters(['TestArr_getters']),
          },
          methods:{
            fun1(){
                  this.$store.dispatch('changeTestArr_action')
            }
          }
        };
    </script>
    本篇文章转自https://www.jianshu.com/p/720c436edc1f
  • 相关阅读:
    vue-awesome-swiper 子项目内容高度适配问题
    ajax的原理及应用
    display:none opacity:0以及visibility:hidden的区别
    javascript 创建型设计模式
    圣杯布局和双飞翼布局
    javascript->对象继承
    js 宏任务和微任务
    android->按钮底部定位上移
    ios移动端开发的坑
    jvm系列 (五) ---类加载机制
  • 原文地址:https://www.cnblogs.com/bubuabc/p/10774931.html
Copyright © 2011-2022 走看看