<template> <div> 父组件 <child></child> </div> </template> <script> import child from './child' export default { data: () => ({ }), components: { child }, created () { this.$store.dispatch('asyncAction') }, mounted () { } } </script>
child.vue
<template> <div> 子组件 <p>{{item0}}</p> <p>{{item}}</p> </div> </template> <script> import { mapState, mapGetters } from 'vuex' export default { data: () => ({ test: '' }), computed: { ...mapGetters({ item: 'getAsyncData' }), ...mapState({ item0: state => state.index.asyncData }) }, created () { }, methods: { } } </script>
index.js
const state = { asyncData: '' } const actions = { asyncAction ({ commit }) { setTimeout(() => { commit('asyncMutation', {'items': [1, 2, 3]})// 作为参数，去调用mutations中的asyncMutation方法来对state改变 }, 2000) } } const getters = { getAsyncData: state => state.asyncData } const mutations = { asyncMutation (state, params) { state.asyncData = params.items[0] // 此时params={'items': [1, 2, 3]}被传过来赋值给asyncData，来同步更新asyncData的值，这样html就可以拿到asyncData.items[0]这样的值了 } } export default { state, actions, getters, mutations }
注意上面的
.... commit('asyncMutation', {'items': [1, 2, 3]}) ... state.asyncData = params.items[0]
如果写成这样的话
commit('asyncMutation') state.asyncData = {'items': [1, 2, 3]}
首先asyncAction是个异步的操作，所以asyncData默认值为空，那么还是导致,child.vue这里报0的错
<template> <div> 子组件 <p>{{item0}}</p> <p>{{item}}</p> </div> </template>
不过根据以上的案例，得出来一个问题就是异步更新值的问题，就是说开始的时候有个默认值，这个默认值会被异步数据改变，比如说这个异步数据返回的object，如果你用props的方式去传递这个数据，其实第一次传递的空值，第二次传递的是更新后的值，所以就出现{{childObject.items[0]}}类似这种取不到值的问题，既然说第一次是空值，它会这样处理''.items[0],那么我们是不是可以在html判断这个是不是空（或者在computed来判断是否为默认值），所以把案例二的child.vue
<template> <div> <p>{{childObject != '' ? childObject.items[0]: ''}}</p> </div> </template> <script> export default { props: ['childObject'], data: () => ({ }), created () { console.log(this.childObject) // 空值 }, methods: { } } </script>
这样是可以通过不报错的，就是created是空值，猜想上面vuex去stroe也可以也可以这样做