vuex에서 만나는 구덩이, vuex 데이터 변경, 구성 요소의 페이지 렌더링 작업 없음

vuex 데이터 변경, 구성 요소의 페이지가 렌더링되지 않음
많은 vuex 초보자들이 이런 문제에 직면하게 될 것이라고 믿는다.
vuex 데이터 업데이트 후 플러그인에서 데이터를 사용하는 곳은 업데이트되지 않았습니다
이런 코드

data() {
 return {
  tableData: this.$store.state.AdminInfo
 };
 }

그리고 template에서 tableData를 사용합니다.

<el-table :data="tableData" class="tablePst">
 <el-table-column label=" " prop="loginname"></el-table-column>
 <el-table-column label=" " prop="realname"></el-table-column>
</el-table>

이렇게 되면 데이터가 렌더링되지 않는 문제가 발생할 것이다
문제
문제를 해결하려면 vue의 생명주기를 이해해야 한다. 페이지가 불러오기 전에tableData는store의 값을 자신에게 부여한다. 이렇게 하면tableData는 첫 번째 값만 있고 후속 vuex의 상태가 바뀌며tableData에 다시 값을 부여하지 않는다. 페이지가 새로 고쳐지고 다시 불러오지 않으면 구성 요소의 생명주기가 다시 시작해야 최신 값을 받을 수 있다.
해결하다
1. 구성 요소의 tableData 상태를 제거하고 템플릿에서 $store를 직접 사용합니다.state.Admin Info 이렇게 하면 언제든지 최신 상태값을 받을 수 있습니다.

<el-table :data="$store.state.AdminInfo" class="tablePst">
 <el-table-column label=" " prop="loginname"></el-table-column>
 <el-table-column label=" " prop="realname"></el-table-column>
</el-table>

2.mapState를 사용하여 vuex의 상태를 구성 요소에 노출하고 다시 사용합니다. 구체적으로 문서를 보십시오vuex mapState 공식 문서.
보충 지식: vue 수정 데이터 페이지가 다시 렌더링되지 않는 문제 해결(Vue 중수 그룹과 대상이 변경된 후 보기가 새로 고쳐지지 않음)
vue 렌더링 메커니즘과 데이터 수정 페이지가 새로 고침되지 않는 문제를 해결하는 여러 가지 방법
본고는 원리를 따지지 않고 마른 것만 말하고 알기 쉽고 배우기 쉽다. (지식을 배울 수 있을 것 같으니 편집자에게 칭찬해 주세요!)
우선 첫째, vue 밑바닥은 데이터 대상을 전송하고 Object를 사용합니다.definePropety, getter와 setter로 전환하기 때문에 vue는 IE8을 지원하지 않습니다.
1. 오브젝트를 간단히 소개합니다.definePropety,
Object.defineProperty(obj, prop, descriptor)
//매개 변수obj속성을 정의할 객체입니다.prop정의하거나 수정할 속성의 이름입니다.descriptor정의되거나 수정될 속성 설명자

var obj = {}
 Object.defineProperty(obj, 'name', {
  get: function() {
   console.log(' '+name);
   return name;
  },
  set: function(value) {
   console.log(' '+value)
   name = value;
  }
 });
  obj.name =' ';// 
  obj.name// 

상술한 바와 같이 우리는 간단하게 발견할 수 있다.이 대상의name 속성에 값을 부여할 때set 방법을 터치하고name 속성을 가져올 때get 방법을 터치합니다.
2. 따라서 vue에서 데이터에 쓴 속성은 getter와setter로 변환할 수 있습니다. 한마디로 응답식이고 다른 정의는 데이터 이외의 데이터입니다. 응답할 수 없는 렌더링입니다. 즉, 데이터 페이지를 바꾸어도 새로 고침되지 않기 때문에 모든 데이터를 렌더링하려면 데이터에 써야 합니다.
필요 없는,this에 정의할 수 있습니다.

var vm = new Vue({
 data:{
  a:1
 }
})

// `vm.a`  

vm.b = 2
// `vm.b`  

3. 간단하게 소개를 마치고, 우리가 몇 가지 새로 고치지 않는 실례를 열거하자면 당연히 상술도 일종이다
첫 번째: 객체의 속성 수정
vue는 이미 데이터에 성명된 속성을 응답으로 바꿀 뿐, 성명이 없는 것은 응답하지 않습니다.

<template>
 <div>
   <div v-for='item in list'>{{item}}</div>
   <button @click='click'> </button>
   <button @click='hadelClick'> </button>
 </div>
</template>
<script>
 export default({
  data(){
   return{
    list:{a:'a',b:'b'},
   }
  },
  methods: {
     click() {
     //  
      this.list.c='c'

     },
     hadelClick(){
      //  ， vue $set 
      this.$set(this.list,'d','d')
     }
    }
 })  
</script>

물론 여러 속성을 추가하려면 Object를 사용할 수 있습니다.assign () 은 모든 열거 가능한 속성의 값을 하나 이상의 원본 대상에서 대상 대상으로 복사하고 대상 대상으로 되돌려줍니다.(간단히 말하면 첫 번째 매개 변수에 통합됨)
this.list = Object.assign({},this.list,{c:'c',d:'d'})
두 번째: 그룹 대상의 속성 수정

<template>
 <div>
   <div v-for='item in list'>{{item.a}}</div>
   <button @click='click'> </button>
   <button @click='hadelClick'> </button>
 </div>
</template>
<script>
 export default({
  data(){
   return{
    list:[{a:'vue'},{a:'react'},{a:'js'}],
   }
  },
  methods: {
     click() {
      // ， （ ， ）
      this.list[0] = {a:'css'} // 
      console.log(this.list) //[{a:'css'},{a:'react'},{a:'js'}]
     },
     hadelClick(){
      //  ， vue $set 
      this.$set(this.list[1],'a','css')
      console.log(this.list)//[{a:'css'},{a:'css'},{a:'js'}]
     }
    }
 })  
</script>

물론 앞에서 말했듯이 vue는 데이터의 데이터를 두루 훑어보고 대상을setter와getter로 변환합니다.그래서 수조 중의 것도 예외가 아니기 때문에 상술한 조작은
변경:

click(){
 this.list[0].a = css // setter。 
  }
}

vue에서 더 많은 것은 수조의 조작이 갱신되지 않는 것이다. 하나는 색인을 통해 값을 부여하는 것이고, 하나는 수조의 길이를 수정하는 것이다. 어떻게 해결합니까?
vue 공식에서도 방법을 주셨어요.
수조의 API에서 원시 수조를 바꿀 수 있는 것은 모두 업데이트를 촉발할 수 있다.
1、push()
2、pop()
3、shift()
4、unshift()
5、splice()
6、sort()
7、reverse()
두 번째는 새로운 수조를 되돌려주는 것이다. 이런 수조는 인용 주소에 근본적인 변화가 생겼다. 이런 값 부여 작업은 업데이트를 촉발할 수 있다. (이것은 새로 고치지 않는 사고방식을 처리하는 것이다. 바로 인용 주소를 바꾸고 값을 다시 부여해서 업데이트를 촉발하는 것이다)
쉽게 말하면 수조의 API는 원수조로 변경된 수조를 직접 수신하는 것이다.

<template>
 <div>
   <div v-for='item in list'>{{item.a}}</div>
   <button @click='click'> </button>
   <button @click='hadelClick'> </button>
 </div>
</template>
<script>
 export default({
  data(){
   return{
    list:[{a:'vue'},{a:'react'},{a:'js'}],
   }
  },
  methods: {
     click() {
      // 
       this.list.push({a:'css'})
     },
     hadelClick(){
    //    
      this.list = this.list.map(item=>{
         item.a = 'css'
         return item
        })
    }
 })  
</script>

마지막으로 해결 방향을 제공한다(이상까지 정해지지 않으면)
대상과 수조는 모두 인용 전달이고 새로운 수조가 되어 받아들이려면 원본을 바꿔야 한다.
제1종

let arr = []// 
this.list.forEach(item=>{ // 
  // ， arr 
  arr.push(item)
})
this.list = arr // 

제2종

// ， 
// ：
let arr = this.list.slice(0);// ，（ ）
arr.forEach(item=>{
  // 
})
// 
this.list = arr

물론 여기는 간단하게 소개할 뿐입니다. 심층 카피에 대한 상세한 소개는 스스로 바이두에 부탁합니다
상술한 것을 실행할 수 없지만, 데이터가 제대로 수정되지 않으면this.$를 사용할 수 있습니다forceUpdate() 메서드(강제 새로 고침)

//this.$forceUpdate();// 

<template>
 <div>
   <div v-for='item in list'>{{item.a}}</div>
   <button @click='click'> </button>
   <button @click='hadelClick'> </button>
 </div>
</template>
<script>
 export default({
  data(){
   return{
    list:[{a:'vue'},{a:'react'},{a:'js'}],
   }
  },
  methods: {
     click() {
      this.list[0] = {a:'css'} // 
      console.log(this.list) //[{a:'css'},{a:'react'},{a:'js'}]
     },
     hadelClick(){
      this.list[0] = {a:'css'} // 
      console.log(this.list) //[{a:'css'},{a:'react'},{a:'js'}]
       this.$forceUpdate();// 
     }
    }
 })
  
</script>

상기 vuex에서 만났던 구덩이, vuex 데이터가 바뀌었습니다. 구성 요소의 페이지가 렌더링되지 않는 작업은 편집자가 모두에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주십시오.