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
  • 相关阅读:
    Docker 部署项目
    Python+Pywinauto+Lackey 实现PC端.exe 自动化测试
    03_Fiddler 导出jmx文件
    02_Postman 中文汉化版
    07_Linux系统(Centos)安装tomcat和部署Web项目
    05_oracel题集
    02_appium基本使用
    01_appium的安装
    02_Monkey使用
    01_Monkey安装
  • 原文地址:https://www.cnblogs.com/bubuabc/p/10774931.html
Copyright © 2011-2022 走看看