改变state里面的数据，页面没有及时渲染,需要重复触发才能渲染

实现功能：

页面首次加载，发送请求获取三条数据，每条数据里面又分为3个小数据。通过 mapState 映射到相应的组件上，在组件中渲染呈现上图的页面。点击查看全部，可重新发送请求，获取一条数据，替换掉 state 中的相对应的那条数据，呈现到页面。

场景呈现：

 

 

按功能来，点击 查看全部 弹出如下选项框，点击选项后，立刻取消弹出框，页面渲染的那条数据立刻更新。

但是这边出现了bug，需要再次点击 查看全部，才能重新渲染页面（注意，vuex中打印的数据是新的）

 

 

 bug出现原因：

async hotRecommendData({commit,state}, idd) {
    let result = await api.api.hotRecommend(idd)
    let data = {
        data: result.data,
        _id: idd.ss,
        lee: result.lei
        // id: idd.ss? aa : ''
    }       
 //state.hotRecommend = [...state.hotRecommend,...result.data]
    commit('HOTRECOMMENDDATA', data)
}


HOTRECOMMENDDATA(state, value) {
    let arr = [...value.data]        
    if (value._id) {
        state.hotRecommend[value._id - 1] = arr[0]
        // console.log('数据2：',state.hotRecommend);
    }
    else{
        state.hotRecommend = [...state.hotRecommend,arr[0]]
    }
}

首次加载页面，执行这串代码

state.hotRecommend = [...state.hotRecommend,arr[0]]

点击 查看全部 ，更换对应那条数据时，执行下面代码。

if (value._id) {
     state.hotRecommend[value._id - 1] = arr[0]

     console.log('数据1：',  state.hotRecommend)
}

此时 state 中的数据是这样，可能因为，是直接替换的原因，导致 替换的数据 没有 __ob__：Observer，可能就是这个原因出现的 bug，导致页面需要点击两次才渲染

 

 

 

 

 

 

 解决方案： 

• 在if 判断中加上 state.hotRecommend = [...state.hotRecommend,arr[0]]  。这时的console.log 打印就都存在   __ob__：Observer  

  if (value._id) {
      state.hotRecommend[value._id - 1] = arr[0]
      state.hotRecommend = [...state.hotRecommend,arr[0]]
      console.log('数据1：',state.hotRecommend);
  }
  else{
      state.hotRecommend = [...state.hotRecommend,arr[0]]
  }

   

• 直接把  state.hotRecommend = [...state.hotRecommend,arr[0]]  提出来放在外面，这时的console.log 打印就都存在   __ob__：Observer

  state.hotRecommend = [...state.hotRecommend,arr[0]]
  if (value._id) {
      state.hotRecommend[value._id - 1] = arr[0]
      console.log('数据1：',state.hotRecommend);
  }

   

• 也可以把 state.hotRecommend = [...state.hotRecommend,arr[0]]   放到 action 函数里面