vuex分模塊后,實(shí)現(xiàn)獲取state的值
問(wèn)題：vuex分模塊后，一個(gè)模塊如何拿到其他模塊的state值，調(diào)其他模塊的方法？
思路：
1.通過(guò)命名空間取值--this.$store.state.car.list // OK
2.通過(guò)定義該屬性的getter方法，因方法全局注冊(cè)，不存在命名空間，可以通過(guò)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)問(wèn).如何在組件中調(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ù)語(yǔ)法
普通語(yǔ)法
this.$store.state.【哪個(gè)數(shù)據(jù)】
模塊化語(yǔ)法：
this.$store.state.【哪個(gè)模塊】.【哪個(gè)數(shù)據(jù)】
<template>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">購(gòu)物車(chē)列表</h4>
</div>
<div class="panel-body">
<p v-if="!CartList.length">這里什么都沒(méi)有，請(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)物車(chē)（{{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的Router是一個(gè)用于實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和路由管理的插件,它可以幫助我們根據(jù)不同的URL請(qǐng)求加載不同的組件,以及實(shí)現(xiàn)前端路由功能,本文給大家介紹vue中的Router基本配置命令,感興趣的朋友跟隨小編一起看看吧2024-02-02
vue在前端技術(shù)中使用越來(lái)越多，也成為了主流框架，今天咱花點(diǎn)時(shí)間學(xué)習(xí)下Vue與element-ui整合方式，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-04-04
vue+element使用動(dòng)態(tài)加載路由方式實(shí)現(xiàn)三級(jí)菜單頁(yè)面顯示的操作
這篇文章主要介紹了vue+element使用動(dòng)態(tài)加載路由方式實(shí)現(xiàn)三級(jí)菜單頁(yè)面顯示的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
詳解vue中的父子傳值雙向綁定及數(shù)據(jù)更新問(wèn)題
這篇文章主要介紹了vue中的父子傳值雙向綁定及數(shù)據(jù)更新問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)算屬性的學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
element?Drawer?抽屜無(wú)法渲染問(wèn)題及解決
這篇文章主要介紹了element?Drawer?抽屜無(wú)法渲染問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家介紹了Vue?項(xiàng)目中Echarts?5使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了vite如何支持cjs方案示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
解決Mint-ui 框架Popup和Datetime Picker組件滾動(dòng)穿透的問(wèn)題
這篇文章主要介紹了解決Mint-ui 框架Popup和Datetime Picker組件滾動(dòng)穿透的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
html頁(yè)面引入vue組件之http-vue-loader.js解讀
這篇文章主要介紹了html頁(yè)面引入vue組件之http-vue-loader.js解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04