Cannot read property 'xxx' of null

8cf022 · May 25, 2019, 6:26pm

vue create ... で生成した project で以下の code を書いていたところ、

src/App.vue

export default {
  name: 'app',
  computed: {
    ...mapState('users', {
      users: 'list'
    })
  },
  created () {
    this.$store.dispatch('users/get_list');
  }
}

src/store/users.js

import axios from 'axios'

const state = {
  list: []
}

const mutations = {
  SET_LIST (state, list) {
    state.list = list;
  }
}

const actions = {
  async get_list ({ commit }) {
    const url = 'https://jsonplaceholder.typicode.com/users';
    const { data } = await axios.get(url);
    commit('SET_LIST', data);
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

以下のようなエラーが出ていました。

以下の回答によると、

stackoverflow
Vuex state is null in mutation after page refresh instead predefined object

vue.js devtools の「New Vuex backend」を disabled にすれば良いと報告している人がいます。

下図の通り、確かにエラーは出なくなる。

この項目を enabled に戻すと、
vue-devtools の vuex tab (2) で

(3) Loading state… と出てるし、spinner が回ってる
(4) console にもエラーが出てる

何か trouble があるみたいです。

何が妥当な解決方法なのかはっきりしませんが、ご存知の方がいらっしゃればお知らせください。