vue项目开发中，vuex里面的sotre数据改变，但是没有触发getter并没触发，视图也不更新的笔记

　　在vue 和 vuex 的开发中，我们可能会遇到一些奇葩的问题，比如说下面的我在开发里遇到的一个奇葩问题。

　vuex 的数据

/**
 * 获取表格数据  VUEX
 */
import init from '../../api/init/init'
 
const state = {
  tableData: { // 表格数据
    content: [], // 表格数据
    total: 0 // 总条数
  }
}
 
const mutations = {
  getTableDataMutationsFn: function (data) { // 修改表格数据
    state.tableData.content = data.content
    state.tableData.total = data.title
  }
}
 
const getters = {
  getTableDataGettersFn: state => { // 导出表格数据
    return state.tableData
  }
}
 
const actions = {
  getTableData ({commit}, params) { // 获取表格数据
    init.getTableData(params, data => {
      commit('getTableDataMutationsFn', data)
    })
  }
}
 
export default {
  state,
  getters,
  actions,
  mutations
}

第一次初始化触发actions的事件拿取数据的时候，数据经过 mutations 事件修改 state 的 tableData 里的 content 和 total 的数据时 会触发 getter事件 将数据返回到页面上，但是在页面的页数发生变化，重新触发actions的获取数据的事件触发后，可以经过 mutations 的事件修改 state 的数据， 但是没有触发 getter 的数据变化， 而且也没有触发到页面的变化。

　　刚开始的时候，我想的是是不是因为数据没有改变，但是我又在数据修改后console。了一下数据，数据确实是修改了，我又在getter的事件里console。了一下，发现只有第一次初始化的时候，触发了打印事件，在第二次页面页数发生改变触发第二次actions的事件 ，修改了state的数据后没有触发getter 的事件。

　　刚开始我在网上看了很多关于 vuex的state变化了，但是页面没有触发更新的文章，但是都没有解决实质上的问题。后台我又自己慢慢琢磨，vuex是不能监听到数组的长度变化的，所以我在想是不是因为这样的原因。后来我就试了把代码改成了

/**

 * 获取表格数据  VUEX

 */

import init from '../../api/init/init'



const state = {

  tableData: { // 表格数据

    content: [], // 表格数据

    total: 0 // 总条数

  }

}



const mutations = {

  getTableDataMutationsFn: function (data) { // 修改表格数据

// 重置 数据

    state.tableData.content = null

    state.tableData.total = null

// 赋值 数据

    state.tableData.content = data.content

    state.tableData.total = data.title

  }

}

　代码改成这样后，我们在数据修改前先把数据重置后，再进行修改，这个问题就得到了解决，但是也不知道这到底是为什么，这么奇葩的问题，就这样解决了。