在Vue应用中使用Vuex是非常常见的操作。然而，偶尔在使用Vuex时会遇到错误信息“TypeError: Cannot read property 'xxx' of undefined”，这个错误信息的意思是无法读取undefined的属性“xxx”，导致了程序的错误。这个问题其实产生的原因很明显，就是因为在调用Vuex的某个属性的时候，这个属性没有被正确地初始化。
解决这个问题的方法也很简单。通常情况下，这个错误是由于未正确初始化Vuex的值所造成的，因此我们需要对变量进行初始化。下面是两个例子：
1.在组件中使用VueX
<template>
<div>
<p>{{ name }}</p>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['name'])
}
}
</script>如果在代码中我们使用了上面的代码，但是在Vuex Store中没有定义“name”这个属性，那么就会报错：“TypeError: Cannot read property 'name' of undefined。”为了解决这个问题，我们只需要在Vuex Store中添加name属性并初始化即可。
立即学习“前端免费学习笔记（深入）”；
2.在Vuex Store中初始化变量
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
name: '' // 需要先进行初始化
},
mutations: {
SET_NAME(state, name) { //进行更改，并重新赋值
state.name = name
}
},
actions: {
setName({commit}, name) { //dispatch对应的方法
commit('SET_NAME', name)
}
},
getters: {
name: (state) => {
return state.name //getters同样需要返回一个指定的属性
}
}
})
export default store在上面的代码中，我们将仅仅声明了一个空字符串的“name”属性进行了初始化。这样，在调用时就不会出现“TypeError: Cannot read property 'name' of undefined”这个错误了。
总结一下，这个错误很常见，但是解决起来也非常简单，只需要在应用中对Vuex的变量进行适当初始化即可。这样我们就可以获得正确的值并更好地使用Vuex了。
