詳解Vuex中mapState的具體用法

來源：懂視網責編：小采時間：2020-11-27 22:28:49

詳解Vuex中mapState的具體用法

詳解Vuex中mapState的具體用法:今天使用Vuex的時候遇到一個坑，也可以說是自己的無知吧，折騰了好久，終于發現自己代碼的錯誤了。真是天雷滾滾~~~~~~ index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' im

推薦度：

點擊下載本文 文檔為doc格式

導讀詳解Vuex中mapState的具體用法:今天使用Vuex的時候遇到一個坑，也可以說是自己的無知吧，折騰了好久，終于發現自己代碼的錯誤了。真是天雷滾滾~~~~~~ index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' im

今天使用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都是一樣的道理。牢記~~~

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com