记录一下在做硅谷外卖的时候犯的小错误

原来的代码:

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

综上所述

快去检查一下你们的state中的属性名是否写对了吗