• 在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
  • 相关阅读:
    scjp考试准备
    scjp考试准备
    scjp考试准备
    scjp考试准备
    maven学习手记
    maven学习手记
    ExtJS MVC 学习手记3
    调整maven配置文件
    ExtJS MVC学习手记 2
    ExtJS MVC学习手记 1
  • 原文地址:https://www.cnblogs.com/bubuabc/p/10774931.html
Copyright © 2020-2023  润新知