记录一下在做硅谷外卖的时候犯的小错误
原来的代码:
**vuex-state:**
export default {
adress: {}, // 地址相关信息对象
}
```
vuex的actions:
```
async getAddress({commit, state}){
// 发送 异步 ajax 请求
const geohash = state.latitude + ',' + state.longitude;
const result = await reqAddress(geohash)
if(result.code === 0){
const address = result.data
// 提交一个mutation
commit('receive_address', {address})
}
},
```
vuex的mutations:
```
receive_address(state, {address}){
state.address = address
},
```
MSite组件里获取state.address:
```
mounted() {
this.$store.dispatch("getAddress");
},
computed: {
// ...mapState(["address]"),
address(){
console.log('Msite-computed-address'); // 这里的输出会执行两次
return this.$store.state.address
},
}
```
此时上述代码会导致MSite组件里的计算属性address= undefined;
为什么呢?
**因为 state 里不存在 address 这个属性( state 里写的是 adress )**
组件在加载时执行的顺序是 先执行 computed 再执行 mounted
然后在组件加载的时候computed里的计算属性函数会执行一次,
此时 **computed** 中**address**中的 ```return this.$store.state.address```返回的是undefined (因为 state 里不存在 address 这个属性),读取的就是一个不存在的值
然后执行 **mounted**中的```this.$store.dispatch("getAddress");```
--> 然后执行 ```commit('receive_address', {address})```
--> 然后执行 `state.address = address`,这句代码就会往state身上添加一个叫 "address" 的属性
我们知道 **computed** 里的计算属性所依赖的值发生变化时计算属性函数会重新执行一次, 但是 : 由于 计算属性 **address** 所依赖的值在第一次执行的时候不存在, 所以计算属性address函数监测不到 **state**中的 **address** 已然发生改变, 所以 组件里的计算属性 **address**函数不会再执行一次, 所以计算属性 **address** 依然还是 **undefined**
然后 我们把 **state** 中的代码改成正确的:
```
export default {
address: {}, // 地址相关信息对象
}
```
改完后,重新执行:
组件加载, **computed**函数执行
计算属性**address**函数执行, 输出"**Msite-computed-address**"
address = {};
**计算属性address依赖了一个已存在的值 store.address**
然后执行 `this.$store.dispatch("getAddress");`
--> 执行`commit('receive_address', {address})`
--> 执行 `state.address = address`;
此时 MSite组件里的计算属性address所依赖的值 **store.address** 发生了改变, 所以计算属性 **address** 函数会重新执行一次,
输出**Msite-computed-address**
此时 计算属性 **address** 就会获取到 **store** 里的 **address** 最新的值, 计算属性**address**不再是**undefined**