今天使用Vuex的時(shí)候遇到一個(gè)坑,也可以說(shuō)是自己的無(wú)知吧,折騰了好久,終于發(fā)現(xiàn)自己代碼的錯(cuò)誤了。真是天雷滾滾~~~~~~
index.js
import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' import actions from './action' import getters from './getters' Vue.use(Vuex) const state = { userInfo: { phone: 111 }, //用戶信息 orderList: [{ orderno: '1111' }], //訂單列表 orderDetail: null, //訂單產(chǎn)品詳情 login: false, //是否登錄 } export default new Vuex.Store({ state, getters, actions, mutations, })
computed: { ...mapState([ 'orderList', 'login' ]), }, mounted(){ console.log(typeof orderList); ==>undefind console.log(typeof this.orderList)==>object }
mapState通過(guò)擴(kuò)展運(yùn)算符將store.state.orderList 映射this.orderList 這個(gè)this 很重要,這個(gè)映射直接映射到當(dāng)前Vue的this對(duì)象上。
所以通過(guò)this都能將這些對(duì)象點(diǎn)出來(lái),同理,mapActions, mapMutations都是一樣的道理。牢記~~~
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com