vuex分模塊后,實(shí)現(xiàn)獲取state的值
問題：vuex分模塊后，一個(gè)模塊如何拿到其他模塊的state值，調(diào)其他模塊的方法？
思路：
1.通過命名空間取值--this.$store.state.car.list // OK
2.通過定義該屬性的getter方法，因方法全局注冊(cè)，不存在命名空間，可以通過this直接調(diào)用。
this.$store.state.car.carGetter
我在car模塊中自己的定義了state, getters,
this.$store.state.car.list可以拿到值.
但是,this.$store.state.car.carGetter報(bào)錯(cuò),
請(qǐng)問.如何在組件中調(diào)用這個(gè)getters,
//car.js
state = {
list: []
}
getters = {
carGetter: state => {
return state.list.filter('');
}
}
new Vuex.Store({
getters: {
test: state => {
return '02';
}
},
modules: { car }
})
// 組件
this.$store.state.car.list // OK
this.$store.state.car.carGetter // undefined
this.$store.state.carGetter // 為什么這么用ok, 難道會(huì)把模塊中的getters注冊(cè)到root ?
已解決！
模塊內(nèi)部的 action、mutation、和 getter 現(xiàn)在仍然注冊(cè)在全局命名空間——這樣保證了多個(gè)模塊能夠響應(yīng)同一 mutation 或 action。
補(bǔ)充知識(shí)：vuex使用模塊的時(shí)候 獲取state里的數(shù)據(jù)語法
普通語法
this.$store.state.【哪個(gè)數(shù)據(jù)】
模塊化語法：
this.$store.state.【哪個(gè)模塊】.【哪個(gè)數(shù)據(jù)】
<template>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">購(gòu)物車列表</h4>
</div>
<div class="panel-body">
<p v-if="!CartList.length">這里什么都沒有，請(qǐng)先添加商品。</p>
<CartListItem v-for="ele in CartList" :key="ele.id" :cartlist-iteam="ele"/>
</div>
<div class="panel-footer">
<a href="" class="btn btn-block btn-danger">清空購(gòu)物車（{{cartQuantity}}）</a>
<a href="" class="btn btn-block btn-info">立即結(jié)算（{{cartTotal}}）</a>
</div>
</div>
</template>
<script>
import CartListItem from './CartListItem'
import { mapGetters } from 'vuex'
export default {
name: 'CartList',
components: {
CartListItem
},
computed: {
CartList () {
return this.$store.state.cartModule.updateCartList
},
...mapGetters(['cartQuantity', 'cartTotal'])
}
}
</script>
以上這篇vuex分模塊后,實(shí)現(xiàn)獲取state的值就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽的方法
這篇文章主要介紹了vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽,實(shí)現(xiàn)思路非常簡(jiǎn)單內(nèi)容包括mata標(biāo)簽的特點(diǎn)和mata標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性，本文通過實(shí)例代碼給大家詳細(xì)講解需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue print.js打印支持Echarts圖表操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue-quill-editor富文本編輯器超詳細(xì)入門使用步驟
vue中很多項(xiàng)目都需要用到富文本編輯器,在使用了ueditor和tinymce后,發(fā)現(xiàn)并不理想,所以果斷使用vue-quill-editor來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue-quill-editor富文本編輯器入門使用步驟的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue之el-option下拉框綁定問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue+elementUI如何實(shí)現(xiàn)頂部路由標(biāo)簽跳轉(zhuǎn)
這篇文章主要介紹了vue+elementUI如何實(shí)現(xiàn)頂部路由標(biāo)簽跳轉(zhuǎn)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue如何使用模擬的json數(shù)據(jù)查看效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
解決vue項(xiàng)目運(yùn)行提示W(wǎng)arnings while compiling.警告的問題
這篇文章主要介紹了解決vue項(xiàng)目運(yùn)行提示W(wǎng)arnings while compiling.警告的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue項(xiàng)目實(shí)現(xiàn)自定義滑塊過渡效果
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)自定義滑塊過渡效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue自定義權(quán)限標(biāo)簽詳細(xì)代碼示例
這篇文章主要給大家介紹了關(guān)于vue自定義權(quán)限標(biāo)簽的相關(guān)資料,在Vue中你可以通過創(chuàng)建自定義組件來實(shí)現(xiàn)自定義標(biāo)簽組件,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
vue3+vite引入插件unplugin-auto-import的方法
這篇文章主要介紹了vue3+vite引入插件unplugin-auto-import的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值?,需要的朋友可以參考下2022-10-10