詳解Vuex中mapState的具體用法 | vuex mapstate
今天使用Vuex的時候遇到一個坑,也可以說是自己的無知吧,折騰了好久,終於發現自己程式碼的錯誤了。真是天雷滾滾~~~~~~index.jsimportVuefromvueimportVuexfromvueximportmutationsfrom./mutationsimportactionsfrom./actionimportgettersfrom./gettersVue.use(Vuex)conststate={userInfo:{phone:111},//使用者資訊orderList:[{orderno:1111}],//訂單列表orderDetail:null,//訂單產品詳情login:false,//是否登入}exportdefaultnewVuex.Store({state,getters,actions,mutations,})computed:{...mapState([orderList,login]),},mounted...
今天使用Vuex的時候遇到一個坑,也可以說是自己的無知吧,折騰了好久,終於發現自己程式碼的錯誤了。真是天雷滾滾~~~~~~
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, //訂單產品詳情 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通過擴充套件運算子將store.state.orderList 對映this.orderList 這個this 很重要,這個對映直接對映到當前Vue的this物件上。
所以通過this都能將這些物件點出來,同理,mapActions, mapMutations都是一樣的道理。牢記~~~
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。
您可能感興趣的文章:vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用詳解vuex中mapState,mapGetters,mapMutations,mapActions的作用Vuex利用state儲存新聞資料例項詳解vuex 中的 state 在元件中如何監聽Vuex之理解state的用法例項vuex s...