我正面临关于vuex的问题, 在我的vue组件中,我调度一个商店请求,然后在计算钩子中映射存储状态,第一次返回null,我认为它在存储状态之前开始映射。
这是代码index.vue
文件代码,
export default {
name: 'tab_3',
data () {
return {
tableData: []
}
},
beforeCreate () {
this.$store.dispatch('registerWeb3')
this.$store.dispatch('getContractInstance')
},
computed: mapState({
coinbase: state => state.web3.coinbase,
balance: state => state.web3.balance
}),
methods: {
Func: function () {
console.log(this.coinbase)
console.log(this.balance)
}
},
beforeMounte () {
this.Func()
},
updated () {
}
}
以下是store.js
文件代码:
Vue.use(Vuex)
export const store = new Vuex.Store({
strict: true,
state,
mutations: {
registerWeb3Instance (state, payload) {
let result = payload
let web3Copy = state.web3
web3Copy.coinbase = result.coinbase
web3Copy.balance = parseInt(result.balance, 10)
},
registerContractInstance (state, payload) {
state.MyContract = () => payload[0]
state.TokenContract = () => payload[1]
}
},
actions: {
registerWeb3 ({commit}) {
getWeb3.then(result => {
commit('registerWeb3Instance', result)
}).catch(e => {
console.log('error in action registerWeb3', e)
})
},
getContractInstance ({commit}) {
getContract.then(result => {
commit('registerContractInstance', result)
}).catch(e => console.log(e))
}
}
})