VueX模塊的具體使用(小白教程)
更新時(shí)間：2020年06月05日 09:55:50 作者：Vam的金豆之路
這篇文章主要介紹了VueX模塊的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
為什么會(huì)出現(xiàn)VueX的模塊呢？當(dāng)你的項(xiàng)目中代碼變多的時(shí)候，很難區(qū)分維護(hù)。那么這時(shí)候Vuex的模塊功能就這么體現(xiàn)出來(lái)了。
那么我們就開(kāi)始吧！
一、模塊是啥？
/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
global:'this is global'
},
// 在以下屬性可以添加多個(gè)模塊。如：moduleOne模塊、moduleTwo模塊。
modules: {
moduleOne:{},
moduleTwo:{}
}
})
二、在模塊內(nèi)添加state
可以直接在模塊中直接書(shū)寫(xiě)state對(duì)象。
/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
global:'this is global'
},
modules: {
moduleOne:{
state:{
moduleOnevalue:'1'
}
},
moduleTwo:{
state:{
moduleTwovalue:'0'
}
}
}
})
我們?cè)陧?yè)面中引用它。我們直接可以找到對(duì)應(yīng)的模塊返回值，也可以使用mapState方法調(diào)用。
<template>
<div class="home">
<p>moduleOne_state：{{moduleOne}}</p>
<p>moduleTwo_state：{{moduleTwo}}</p>
<p>moduleOne_mapState：{{moduleOnevalue}}</p>
<p>moduleTwo_mapState：{{moduleTwovalue}}</p>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name:"Home",
data() {
return {
msg:"this is Home"
}
},
computed: {
moduleOne(){
// 這里使用了命名空間
return this.$store.state.moduleOne.moduleOnevalue
},
moduleTwo(){
return this.$store.state.moduleTwo.moduleTwovalue
},
...mapState({
moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
})
},
methods: {
},
mounted() {
},
}
</script>
三、在模塊中添加mutations
我們分別給兩個(gè)模塊添加mutations屬性，在里面定義相同名字的方法，我們先在頁(yè)面看一下。
/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
global:'this is global'
},
modules: {
moduleOne:{
state:{
moduleOnevalue:'1'
},
mutations:{
updateValue(state,value){
state.moduleOnevalue=value
}
}
},
moduleTwo:{
state:{
moduleTwovalue:'0'
},
mutations:{
updateValue(state,value){
state.moduleTwovalue=value
}
}
}
}
})
在頁(yè)面引用它
<template>
<div class="home">
<p>moduleOne_state：{{moduleOne}}</p>
<p>moduleTwo_state：{{moduleTwo}}</p>
<p>moduleOne_mapState：{{moduleOnevalue}}</p>
<p>moduleTwo_mapState：{{moduleTwovalue}}</p>
</div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations} from 'vuex'
export default {
name:"Home",
data() {
return {
msg:"this is Home"
}
},
computed: {
moduleOne(){
return this.$store.state.moduleOne.moduleOnevalue
},
moduleTwo(){
return this.$store.state.moduleTwo.moduleTwovalue
},
...mapState({
moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
})
},
methods: {
...mapMutations(['updateValue'])
},
mounted() {
this.updateValue('我是改變后的值：1')
},
}
</script>
我們看到兩個(gè)模塊的值都被改變了，為什么呢？因?yàn)閂ueX默認(rèn)情況下，每個(gè)模塊中的mutations都是在全局命名空間下的。那么我們肯定不希望這樣。如果兩個(gè)模塊中的方法名不一樣，當(dāng)然不會(huì)出現(xiàn)這種情況，但是怎么才能避免這種情況呢？
我們需要定義一個(gè)屬性namespaced為true。
/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
global:'this is global'
},
modules: {
moduleOne:{
namespaced:true, //在每個(gè)模塊中定義為true,可以避免方法重名
state:{
moduleOnevalue:'1'
},
mutations:{
updateValue(state,value){
state.moduleOnevalue=value
}
}
},
moduleTwo:{
namespaced:true,
state:{
moduleTwovalue:'0'
},
mutations:{
updateValue(state,value){
state.moduleTwovalue=value
}
}
}
}
})
在頁(yè)面中需要使用命名空間的方法調(diào)用它。
<template>
<div class="home">
<p>moduleOne_state：{{moduleOne}}</p>
<p>moduleTwo_state：{{moduleTwo}}</p>
<p>moduleOne_mapState：{{moduleOnevalue}}</p>
<p>moduleTwo_mapState：{{moduleTwovalue}}</p>
</div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
name:"Home",
data() {
return {
msg:"this is Home"
}
},
computed: {
moduleOne(){
return this.$store.state.moduleOne.moduleOnevalue
},
moduleTwo(){
return this.$store.state.moduleTwo.moduleTwovalue
},
...mapState({
moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
})
},
methods: {
...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue'])
},
mounted() {
this['moduleOne/updateValue']('我是改變后的值：1');
this['moduleTwo/updateValue']('我是改變后的值：0');
},
}
</script>
四、在模塊中添加getters
namespaced 同樣在 getters也生效，下面我們?cè)趦蓚€(gè)模塊中定義了相同名字的方法。
/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
global:'this is global'
},
modules: {
moduleOne:{
namespaced:true,
state:{
moduleOnevalue:'1'
},
mutations:{
updateValue(state,value){
state.moduleOnevalue=value
}
},
getters:{
valuePlus(state){
return state.moduleOnevalue+'1'
}
}
},
moduleTwo:{
namespaced:true,
state:{
moduleTwovalue:'0'
},
mutations:{
updateValue(state,value){
state.moduleTwovalue=value
}
},
getters:{
valuePlus(state){
return state.moduleTwovalue+'0'
}
}
}
}
})
在頁(yè)面引用查看效果。
<template>
<div class="home">
<p>moduleOne_state：{{moduleOne}}</p>
<p>moduleTwo_state：{{moduleTwo}}</p>
<p>moduleOne_mapState：{{moduleOnevalue}}</p>
<p>moduleTwo_mapState：{{moduleTwovalue}}</p>
<p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
<p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
</div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
name:"Home",
data() {
return {
msg:"this is Home"
}
},
computed: {
moduleOne(){
return this.$store.state.moduleOne.moduleOnevalue
},
moduleTwo(){
return this.$store.state.moduleTwo.moduleTwovalue
},
...mapState({
moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
}),
...mapGetters({
OnevaluePlus:'moduleOne/valuePlus',
TwovaluePlus:'moduleTwo/valuePlus'
})
},
methods: {
...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue'])
},
mounted() {
// this['moduleOne/updateValue']('我是改變后的值：1');
// this['moduleTwo/updateValue']('我是改變后的值：0');
},
}
</script>
我們也可以獲取全局的變量，第三個(gè)參數(shù)就是獲取全局變量的參數(shù)。
/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
global:'this is global'
},
modules: {
moduleOne:{
namespaced:true,
state:{
moduleOnevalue:'1'
},
mutations:{
updateValue(state,value){
state.moduleOnevalue=value
}
},
getters:{
valuePlus(state){
return state.moduleOnevalue+'1'
},
globalValuePlus(state,getters,rootState){
return state.moduleOnevalue+rootState.global
}
}
},
moduleTwo:{
namespaced:true,
state:{
moduleTwovalue:'0'
},
mutations:{
updateValue(state,value){
state.moduleTwovalue=value
}
},
getters:{
valuePlus(state){
return state.moduleTwovalue+'0'
},
globalValuePlus(state,getters,rootState){
return state.moduleTwovalue+rootState.global
}
}
}
}
})
在頁(yè)面查看。
<template>
<div class="home">
<p>moduleOne_state：{{moduleOne}}</p>
<p>moduleTwo_state：{{moduleTwo}}</p>
<p>moduleOne_mapState：{{moduleOnevalue}}</p>
<p>moduleTwo_mapState：{{moduleTwovalue}}</p>
<p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
<p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
<p>moduleOne_mapGetters_global：{{OneglobalValue}}</p>
<p>moduleTwo_mapGetters_global：{{TwoglobalValue}}</p>
</div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
name:"Home",
data() {
return {
msg:"this is Home"
}
},
computed: {
moduleOne(){
return this.$store.state.moduleOne.moduleOnevalue
},
moduleTwo(){
return this.$store.state.moduleTwo.moduleTwovalue
},
...mapState({
moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
}),
...mapGetters({
OnevaluePlus:'moduleOne/valuePlus',
TwovaluePlus:'moduleTwo/valuePlus',
OneglobalValue:'moduleOne/globalValuePlus',
TwoglobalValue:'moduleTwo/globalValuePlus'
})
},
methods: {
...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue'])
},
mounted() {
// this['moduleOne/updateValue']('我是改變后的值：1');
// this['moduleTwo/updateValue']('我是改變后的值：0');
},
}
</script>
也可以獲取其他模塊的變量。
/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
global:'this is global'
},
modules: {
moduleOne:{
namespaced:true,
state:{
moduleOnevalue:'1'
},
mutations:{
updateValue(state,value){
state.moduleOnevalue=value
}
},
getters:{
valuePlus(state){
return state.moduleOnevalue+'1'
},
globalValuePlus(state,getters,rootState){
return state.moduleOnevalue+rootState.global
},
otherValuePlus(state,getters,rootState){
return state.moduleOnevalue+rootState.moduleTwo.moduleTwovalue
},
}
},
moduleTwo:{
namespaced:true,
state:{
moduleTwovalue:'0'
},
mutations:{
updateValue(state,value){
state.moduleTwovalue=value
}
},
getters:{
valuePlus(state){
return state.moduleTwovalue+'0'
},
globalValuePlus(state,getters,rootState){
return state.moduleTwovalue+rootState.global
},
otherValuePlus(state,getters,rootState){
return state.moduleTwovalue+rootState.moduleOne.moduleOnevalue
},
}
}
}
})
在頁(yè)面查看。
<template>
<div class="home">
<p>moduleOne_state：{{moduleOne}}</p>
<p>moduleTwo_state：{{moduleTwo}}</p>
<p>moduleOne_mapState：{{moduleOnevalue}}</p>
<p>moduleTwo_mapState：{{moduleTwovalue}}</p>
<p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
<p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
<p>moduleOne_mapGetters_global：{{OneglobalValue}}</p>
<p>moduleTwo_mapGetters_global：{{TwoglobalValue}}</p>
<p>moduleOne_mapGetters_other：{{OneotherValue}}</p>
<p>moduleTwo_mapGetters_other：{{TwootherValue}}</p>
</div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
name:"Home",
data() {
return {
msg:"this is Home"
}
},
computed: {
moduleOne(){
return this.$store.state.moduleOne.moduleOnevalue
},
moduleTwo(){
return this.$store.state.moduleTwo.moduleTwovalue
},
...mapState({
moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
}),
...mapGetters({
OnevaluePlus:'moduleOne/valuePlus',
TwovaluePlus:'moduleTwo/valuePlus',
OneglobalValue:'moduleOne/globalValuePlus',
TwoglobalValue:'moduleTwo/globalValuePlus',
OneotherValue:'moduleOne/otherValuePlus',
TwootherValue:'moduleTwo/otherValuePlus'
})
},
methods: {
...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue'])
},
mounted() {
// this['moduleOne/updateValue']('我是改變后的值：1');
// this['moduleTwo/updateValue']('我是改變后的值：0');
},
}
</script>
五、在模塊中添加actions
actions對(duì)象中的方法有一個(gè)參數(shù)對(duì)象ctx。里面分別{state,commit,rootState}。這里我們直接展開(kāi)用。actions默認(rèn)只會(huì)提交本地模塊中的mutations。如果需要提交全局或者其他模塊，需要在commit方法的第三個(gè)參數(shù)上加上{root:true}。
/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
global:'this is global'
},
modules: {
moduleOne:{
namespaced:true,
state:{
moduleOnevalue:'1'
},
mutations:{
updateValue(state,value){
state.moduleOnevalue=value
}
},
getters:{
valuePlus(state){
return state.moduleOnevalue+'1'
},
globalValuePlus(state,getters,rootState){
return state.moduleOnevalue+rootState.global
},
otherValuePlus(state,getters,rootState){
return state.moduleOnevalue+rootState.moduleTwo.moduleTwovalue
},
},
actions:{
timeOut({state,commit,rootState}){
setTimeout(()=>{
commit('updateValue','我是異步改變的值：1')
},3000)
}
}
},
moduleTwo:{
namespaced:true,
state:{
moduleTwovalue:'0'
},
mutations:{
updateValue(state,value){
state.moduleTwovalue=value
}
},
getters:{
valuePlus(state){
return state.moduleTwovalue+'0'
},
globalValuePlus(state,getters,rootState){
return state.moduleTwovalue+rootState.global
},
otherValuePlus(state,getters,rootState){
return state.moduleTwovalue+rootState.moduleOne.moduleOnevalue
},
}
}
}
})
頁(yè)面引用。
<template>
<div class="home">
<p>moduleOne_state：{{moduleOne}}</p>
<p>moduleTwo_state：{{moduleTwo}}</p>
<p>moduleOne_mapState：{{moduleOnevalue}}</p>
<p>moduleTwo_mapState：{{moduleTwovalue}}</p>
<p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
<p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
<p>moduleOne_mapGetters_global：{{OneglobalValue}}</p>
<p>moduleTwo_mapGetters_global：{{TwoglobalValue}}</p>
<p>moduleOne_mapGetters_other：{{OneotherValue}}</p>
<p>moduleTwo_mapGetters_other：{{TwootherValue}}</p>
</div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
name:"Home",
data() {
return {
msg:"this is Home"
}
},
computed: {
moduleOne(){
return this.$store.state.moduleOne.moduleOnevalue
},
moduleTwo(){
return this.$store.state.moduleTwo.moduleTwovalue
},
...mapState({
moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
}),
...mapGetters({
OnevaluePlus:'moduleOne/valuePlus',
TwovaluePlus:'moduleTwo/valuePlus',
OneglobalValue:'moduleOne/globalValuePlus',
TwoglobalValue:'moduleTwo/globalValuePlus',
OneotherValue:'moduleOne/otherValuePlus',
TwootherValue:'moduleTwo/otherValuePlus'
})
},
methods: {
...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue']),
...mapActions(['moduleOne/timeOut'])
},
mounted() {
// this['moduleOne/updateValue']('我是改變后的值：1');
// this['moduleTwo/updateValue']('我是改變后的值：0');
this['moduleOne/timeOut']();
},
}
</script>
下面我們看下如何提交全局或者其他模塊的mutations。
/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
global:'this is global'
},
mutations:{
mode(state,data){
state.global=data
}
},
modules: {
moduleOne:{
namespaced:true,
state:{
moduleOnevalue:'1'
},
mutations:{
updateValue(state,value){
state.moduleOnevalue=value
}
},
getters:{
valuePlus(state){
return state.moduleOnevalue+'1'
},
globalValuePlus(state,getters,rootState){
return state.moduleOnevalue+rootState.global
},
otherValuePlus(state,getters,rootState){
return state.moduleOnevalue+rootState.moduleTwo.moduleTwovalue
},
},
actions:{
timeOut({state,commit,rootState}){
setTimeout(()=>{
commit('updateValue','我是異步改變的值：1')
},3000)
},
globaltimeOut({commit}){
setTimeout(()=>{
commit('mode','我改變了global的值',{root:true})
},3000)
}
}
},
moduleTwo:{
namespaced:true,
state:{
moduleTwovalue:'0'
},
mutations:{
updateValue(state,value){
state.moduleTwovalue=value
}
},
getters:{
valuePlus(state){
return state.moduleTwovalue+'0'
},
globalValuePlus(state,getters,rootState){
return state.moduleTwovalue+rootState.global
},
otherValuePlus(state,getters,rootState){
return state.moduleTwovalue+rootState.moduleOne.moduleOnevalue
},
}
}
}
})
頁(yè)面引用。
<template>
<div class="home">
<p>moduleOne_state：{{moduleOne}}</p>
<p>moduleTwo_state：{{moduleTwo}}</p>
<p>moduleOne_mapState：{{moduleOnevalue}}</p>
<p>moduleTwo_mapState：{{moduleTwovalue}}</p>
<p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
<p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
<p>moduleOne_mapGetters_global：{{OneglobalValue}}</p>
<p>moduleTwo_mapGetters_global：{{TwoglobalValue}}</p>
<p>moduleOne_mapGetters_other：{{OneotherValue}}</p>
<p>moduleTwo_mapGetters_other：{{TwootherValue}}</p>
</div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
name:"Home",
data() {
return {
msg:"this is Home"
}
},
computed: {
moduleOne(){
return this.$store.state.moduleOne.moduleOnevalue
},
moduleTwo(){
return this.$store.state.moduleTwo.moduleTwovalue
},
...mapState({
moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
}),
...mapGetters({
OnevaluePlus:'moduleOne/valuePlus',
TwovaluePlus:'moduleTwo/valuePlus',
OneglobalValue:'moduleOne/globalValuePlus',
TwoglobalValue:'moduleTwo/globalValuePlus',
OneotherValue:'moduleOne/otherValuePlus',
TwootherValue:'moduleTwo/otherValuePlus'
})
},
methods: {
...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue']),
...mapActions(['moduleOne/timeOut','moduleOne/globaltimeOut'])
},
mounted() {
// this['moduleOne/updateValue']('我是改變后的值：1');
// this['moduleTwo/updateValue']('我是改變后的值：0');
// this['moduleOne/timeOut']();
this['moduleOne/globaltimeOut']();
},
}
</script>
那么提交其他模塊的呢？
/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
global:'this is global'
},
mutations:{
mode(state,data){
state.global=data
}
},
modules: {
moduleOne:{
namespaced:true,
state:{
moduleOnevalue:'1'
},
mutations:{
updateValue(state,value){
state.moduleOnevalue=value
}
},
getters:{
valuePlus(state){
return state.moduleOnevalue+'1'
},
globalValuePlus(state,getters,rootState){
return state.moduleOnevalue+rootState.global
},
otherValuePlus(state,getters,rootState){
return state.moduleOnevalue+rootState.moduleTwo.moduleTwovalue
},
},
actions:{
timeOut({state,commit,rootState}){
setTimeout(()=>{
commit('updateValue','我是異步改變的值：1')
},3000)
},
globaltimeOut({commit}){
setTimeout(()=>{
commit('mode','我改變了global的值',{root:true})
},3000)
},
othertimeOut({commit}){
setTimeout(()=>{
commit('moduleTwo/updateValue','我改變了moduleTwo的值',{root:true})
},3000)
}
}
},
moduleTwo:{
namespaced:true,
state:{
moduleTwovalue:'0'
},
mutations:{
updateValue(state,value){
state.moduleTwovalue=value
}
},
getters:{
valuePlus(state){
return state.moduleTwovalue+'0'
},
globalValuePlus(state,getters,rootState){
return state.moduleTwovalue+rootState.global
},
otherValuePlus(state,getters,rootState){
return state.moduleTwovalue+rootState.moduleOne.moduleOnevalue
},
}
}
}
})
頁(yè)面引用。
<template>
<div class="home">
<p>moduleOne_state：{{moduleOne}}</p>
<p>moduleTwo_state：{{moduleTwo}}</p>
<p>moduleOne_mapState：{{moduleOnevalue}}</p>
<p>moduleTwo_mapState：{{moduleTwovalue}}</p>
<p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
<p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
<p>moduleOne_mapGetters_global：{{OneglobalValue}}</p>
<p>moduleTwo_mapGetters_global：{{TwoglobalValue}}</p>
<p>moduleOne_mapGetters_other：{{OneotherValue}}</p>
<p>moduleTwo_mapGetters_other：{{TwootherValue}}</p>
</div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
name:"Home",
data() {
return {
msg:"this is Home"
}
},
computed: {
moduleOne(){
return this.$store.state.moduleOne.moduleOnevalue
},
moduleTwo(){
return this.$store.state.moduleTwo.moduleTwovalue
},
...mapState({
moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue
}),
...mapGetters({
OnevaluePlus:'moduleOne/valuePlus',
TwovaluePlus:'moduleTwo/valuePlus',
OneglobalValue:'moduleOne/globalValuePlus',
TwoglobalValue:'moduleTwo/globalValuePlus',
OneotherValue:'moduleOne/otherValuePlus',
TwootherValue:'moduleTwo/otherValuePlus'
})
},
methods: {
...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue']),
...mapActions(['moduleOne/timeOut','moduleOne/globaltimeOut','moduleOne/othertimeOut'])
},
mounted() {
// this['moduleOne/updateValue']('我是改變后的值：1');
// this['moduleTwo/updateValue']('我是改變后的值：0');
// this['moduleOne/timeOut']();
// this['moduleOne/globaltimeOut']();
this['moduleOne/othertimeOut']();
},
}
</script>
注意：你可以在module中再繼續(xù)添加模塊，可以無(wú)限循環(huán)下去。
六、動(dòng)態(tài)注冊(cè)模塊
有時(shí)候，我們會(huì)使用router的異步加載路由，有些地方會(huì)用不到一些模塊的數(shù)據(jù)，那么我們利用VueX的動(dòng)態(tài)注冊(cè)模塊。我們來(lái)到入口文件main.js中。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// 動(dòng)態(tài)注冊(cè)模塊
store.registerModule('moduleThree',{
state:{
text:"this is moduleThree"
}
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
在頁(yè)面引用它。
<template>
<div class="home">
<p>moduleOne_state：{{moduleOne}}</p>
<p>moduleTwo_state：{{moduleTwo}}</p>
<p>moduleOne_mapState：{{moduleOnevalue}}</p>
<p>moduleTwo_mapState：{{moduleTwovalue}}</p>
<p>moduleOne_mapGetters：{{OnevaluePlus}}</p>
<p>moduleTwo_mapGetters：{{TwovaluePlus}}</p>
<p>moduleOne_mapGetters_global：{{OneglobalValue}}</p>
<p>moduleTwo_mapGetters_global：{{TwoglobalValue}}</p>
<p>moduleOne_mapGetters_other：{{OneotherValue}}</p>
<p>moduleTwo_mapGetters_other：{{TwootherValue}}</p>
<p>moduleThree_mapState：{{moduleThreetext}}</p>
</div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
name:"Home",
data() {
return {
msg:"this is Home"
}
},
computed: {
moduleOne(){
return this.$store.state.moduleOne.moduleOnevalue
},
moduleTwo(){
return this.$store.state.moduleTwo.moduleTwovalue
},
...mapState({
moduleOnevalue:(state)=>state.moduleOne.moduleOnevalue,
moduleTwovalue:(state)=>state.moduleTwo.moduleTwovalue,
moduleThreetext:(state)=>state.moduleThree.text
}),
...mapGetters({
OnevaluePlus:'moduleOne/valuePlus',
TwovaluePlus:'moduleTwo/valuePlus',
OneglobalValue:'moduleOne/globalValuePlus',
TwoglobalValue:'moduleTwo/globalValuePlus',
OneotherValue:'moduleOne/otherValuePlus',
TwootherValue:'moduleTwo/otherValuePlus'
})
},
methods: {
...mapMutations(['moduleOne/updateValue','moduleTwo/updateValue']),
...mapActions(['moduleOne/timeOut','moduleOne/globaltimeOut','moduleOne/othertimeOut'])
},
mounted() {
// this['moduleOne/updateValue']('我是改變后的值：1');
// this['moduleTwo/updateValue']('我是改變后的值：0');
// this['moduleOne/timeOut']();
// this['moduleOne/globaltimeOut']();
// this['moduleOne/othertimeOut']();
},
}
</script>
到此這篇關(guān)于VueX模塊的具體使用(小白教程)的文章就介紹到這了,更多相關(guān)VueX 模塊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Vue.js中使用Vuex實(shí)現(xiàn)組件數(shù)據(jù)共享案例
- vuex存取值和映射函數(shù)使用說(shuō)明
- Vuex中的Mutations的具體使用方法
- Vue的狀態(tài)管理vuex使用方法詳解
- 使用vuex較為優(yōu)雅的實(shí)現(xiàn)一個(gè)購(gòu)物車(chē)功能的示例代碼
- vue 實(shí)現(xiàn)通過(guò)vuex 存儲(chǔ)值 在不同界面使用
- 使用vuex存儲(chǔ)用戶信息到localStorage的實(shí)例
- vue.js的狀態(tài)管理vuex中store的使用詳解
- 在vue中使用vuex,修改state的值示例
- uni-app微信小程序登錄并使用vuex存儲(chǔ)登錄狀態(tài)的思路詳解
- nuxt踩坑之Vuex狀態(tài)樹(shù)的模塊方式使用詳解
- vuex的使用步驟
相關(guān)文章
Vue 2.0在IE11中打開(kāi)項(xiàng)目頁(yè)面空白的問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于Vue 2.0在ie 11中打開(kāi)項(xiàng)目頁(yè)面空白問(wèn)題的解決方法，文中詳細(xì)分析出現(xiàn)該問(wèn)題的原因，并給出了詳細(xì)的解決方法，需要的朋友可以參考借鑒，下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
今天小編就為大家分享一篇關(guān)于vue中$nextTick的用法講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
集成vue到j(luò)query/bootstrap項(xiàng)目的方法
下面小編就為大家分享一篇集成vue到j(luò)query/bootstrap項(xiàng)目的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
<keep-alive> 是一個(gè)抽象組件,用于將其內(nèi)部的組件保留在內(nèi)存中,而不會(huì)重新渲染,這意味著當(dāng)組件在<keep-alive> 內(nèi)部切換時(shí),其狀態(tài)將被保留,而不是被銷(xiāo)毀和重新創(chuàng)建,這篇文章主要介紹了Vue中的keep-alive緩存組件的理解,需要的朋友可以參考下2024-01-01
vue中關(guān)于redirect(重定向)初學(xué)者的坑
這篇文章主要介紹了vue中關(guān)于redirect(重定向)初學(xué)者的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Element?table?上下移需求的實(shí)現(xiàn)
本文主要介紹了Element?table?上下移需求的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue3中ref動(dòng)態(tài)綁定的相關(guān)技巧,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解一下2024-01-01
axios上傳文件錯(cuò)誤:Current?request?is?not?a?multipart?request
最近工作中使用vue上傳文件的時(shí)候遇到了個(gè)問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于axios上傳文件錯(cuò)誤:Current?request?is?not?a?multipart?request解決的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)價(jià)格日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
Vue動(dòng)態(tài)添加class可能帶來(lái)的問(wèn)題解讀(被覆蓋)
文章討論了在使用Vue.js時(shí),通過(guò)動(dòng)態(tài)class修改元素樣式時(shí)可能會(huì)遇到的問(wèn)題,當(dāng)通過(guò)JavaScript動(dòng)態(tài)添加類(lèi)時(shí),Vue的動(dòng)態(tài)class會(huì)覆蓋掉通過(guò)JavaScript添加的類(lèi),導(dǎo)致樣式丟失,這個(gè)問(wèn)題在實(shí)際開(kāi)發(fā)中可能會(huì)遇到,尤其是在使用第三方框架2024-12-12