Vuex模塊化和命名空間namespaced實(shí)例演示
更新時(shí)間：2021年11月15日 10:37:23 作者：533_
這篇文章主要介紹了Vuex模塊化和命名空間namespaced的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
1. 目的：
讓代碼更好維護(hù)，讓多種數(shù)據(jù)分類更加明確。
2. 修改store/index.js
store/index.js
const countAbout = {
namespaced:true,//開啟命名空間
state:{x:1},
mutations: { ... },
actions: { ... },
getters: {
bigSum(state){
return state.sum * 10
}
}
}
const personAbout = {
namespaced:true,//開啟命名空間
state:{ ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
countAbout,
personAbout
}
})
注意： namespaced:true,要開啟命名空間
3. 開啟命名空間后，組件中讀取state數(shù)據(jù)：
//方式一：自己直接讀取
this.$store.state.personAbout.list
//方式二：借助mapState讀?。?
...mapState('countAbout',['sum','school','subject']),
4. 開啟命名空間后，組件中讀取getters數(shù)據(jù)：
//方式一：自己直接讀取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters讀?。?
...mapGetters('countAbout',['bigSum'])
5. 開啟命名空間后，組件中調(diào)用dispatch
//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
開啟命名空間后，組件中調(diào)用commit
//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
例子：
Fenix：
總代碼：
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入store
import store from './store'
//關(guān)閉Vue的生產(chǎn)提示
Vue.config.productionTip = false
//創(chuàng)建vm
new Vue({
el:'#app',
render: h => h(App),
store,
beforeCreate() {
Vue.prototype.$bus = this
}
})
App.js
<template>
<div>
<Count/>
<hr>
<Person/>
</div>
</template>
<script>
import Count from './components/Count'
import Person from './components/Person'
export default {
name:'App',
components:{Count,Person},
}
</script>
store/index.js
//該文件用于創(chuàng)建Vuex中最為核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//應(yīng)用Vuex插件
Vue.use(Vuex)
//創(chuàng)建并暴露store
export default new Vuex.Store({
modules:{
countAbout:countOptions,
personAbout:personOptions
}
})
store/count.js
//求和相關(guān)的配置
export default {
namespaced:true,
actions:{
jiaOdd(context,value){
console.log('actions中的jiaOdd被調(diào)用了')
if(context.state.sum % 2){
context.commit('JIA',value)
}
},
jiaWait(context,value){
console.log('actions中的jiaWait被調(diào)用了')
setTimeout(()=>{
context.commit('JIA',value)
},500)
}
},
mutations:{
JIA(state,value){
console.log('mutations中的JIA被調(diào)用了')
state.sum += value
},
JIAN(state,value){
console.log('mutations中的JIAN被調(diào)用了')
state.sum -= value
},
},
state:{
sum:0, //當(dāng)前的和
school:'尚硅谷',
subject:'前端',
},
getters:{
bigSum(state){
return state.sum*10
}
},
}
store/person.js
//人員管理相關(guān)的配置
import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
namespaced:true,
actions:{
addPersonWang(context,value){
if(value.name.indexOf('王') === 0){
context.commit('ADD_PERSON',value)
}else{
alert('添加的人必須姓王！')
}
},
addPersonServer(context){
axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
response => {
context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
},
error => {
alert(error.message)
}
)
}
},
mutations:{
ADD_PERSON(state,value){
console.log('mutations中的ADD_PERSON被調(diào)用了')
state.personList.unshift(value)
}
},
state:{
personList:[
{id:'001',name:'張三'}
]
},
getters:{
firstPersonName(state){
return state.personList[0].name
}
},
}
components/Count.vue
<template>
<div>
<h1>當(dāng)前求和為：{{sum}}</h1>
<h3>當(dāng)前求和放大10倍為：{{bigSum}}</h3>
<h3>我在{{school}}，學(xué)習(xí){{subject}}</h3>
<h3 style="color:red">Person組件的總?cè)藬?shù)是：{{personList.length}}</h3>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment(n)">+</button>
<button @click="decrement(n)">-</button>
<button @click="incrementOdd(n)">當(dāng)前求和為奇數(shù)再加</button>
<button @click="incrementWait(n)">等一等再加</button>
</div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
name:'Count',
data() {
return {
n:1, //用戶選擇的數(shù)字
}
},
computed:{
//借助mapState生成計(jì)算屬性，從state中讀取數(shù)據(jù)。（數(shù)組寫法）
...mapState('countAbout',['sum','school','subject']),
...mapState('personAbout',['personList']),
//借助mapGetters生成計(jì)算屬性，從getters中讀取數(shù)據(jù)。（數(shù)組寫法）
...mapGetters('countAbout',['bigSum'])
},
methods: {
//借助mapMutations生成對(duì)應(yīng)的方法，方法中會(huì)調(diào)用commit去聯(lián)系mutations(對(duì)象寫法)
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
//借助mapActions生成對(duì)應(yīng)的方法，方法中會(huì)調(diào)用dispatch去聯(lián)系actions(對(duì)象寫法)
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
},
mounted() {
console.log(this.$store)
},
}
</script>
<style lang="css">
button{
margin-left: 5px;
}
</style>
components/Person.vue
<template>
<div>
<h1>人員列表</h1>
<h3 style="color:red">Count組件求和為：{{sum}}</h3>
<h3>列表中第一個(gè)人的名字是：{{firstPersonName}}</h3>
<input type="text" placeholder="請(qǐng)輸入名字" v-model="name">
<button @click="add">添加</button>
<button @click="addWang">添加一個(gè)姓王的人</button>
<button @click="addPersonServer">添加一個(gè)人，名字隨機(jī)</button>
<ul>
<li v-for="p in personList" :key="p.id">{{p.name}}</li>
</ul>
</div>
</template>
<script>
import {nanoid} from 'nanoid'
export default {
name:'Person',
data() {
return {
name:''
}
},
computed:{
personList(){
return this.$store.state.personAbout.personList
},
sum(){
return this.$store.state.countAbout.sum
},
firstPersonName(){
return this.$store.getters['personAbout/firstPersonName']
}
},
methods: {
add(){
const personObj = {id:nanoid(),name:this.name}
this.$store.commit('personAbout/ADD_PERSON',personObj)
this.name = ''
},
addWang(){
const personObj = {id:nanoid(),name:this.name}
this.$store.dispatch('personAbout/addPersonWang',personObj)
this.name = ''
},
addPersonServer(){
this.$store.dispatch('personAbout/addPersonServer')
}
},
}
</script>
到此這篇關(guān)于Vuex模塊化和命名空間namespaced的文章就介紹到這了,更多相關(guān)Vuex模塊化和命名空間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue?Router?返回后記住滾動(dòng)條位置的實(shí)現(xiàn)方法
使用?Vue?router?創(chuàng)建?SPA(Single?Page?App),往往有這種需求：首頁是列表頁,點(diǎn)擊列表項(xiàng)進(jìn)入詳情頁,在詳情頁點(diǎn)擊返回首頁后,希望看到的是,首頁不刷新,并且滾動(dòng)條停留在之前的位置,這篇文章主要介紹了Vue?Router?返回后記住滾動(dòng)條位置的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-09-09
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認(rèn)hash模式，通過引入Vue-router對(duì)象模塊時(shí)配置mode屬性可以啟用history模式，本文將通過代碼示例給大家詳細(xì)分析Vue路由History模式2023-06-06
這篇文章主要介紹了vxe-table如何在單元格中渲染簡單的餅圖，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue點(diǎn)擊切換Class變化,實(shí)現(xiàn)Active當(dāng)前樣式操作
這篇文章主要介紹了Vue點(diǎn)擊切換Class變化,實(shí)現(xiàn)Active當(dāng)前樣式操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue router帶參數(shù)頁面刷新或回退參數(shù)消失的解決方法
這篇文章主要介紹了vue router帶參數(shù)頁面刷新或回退參數(shù)消失的解決方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
Vue.js實(shí)現(xiàn)無限加載與分頁功能開發(fā)
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)無限加載與分頁功能開發(fā)實(shí)踐，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
vue如何修改data中的obj數(shù)據(jù)的屬性
這篇文章主要介紹了vue如何修改data中的obj數(shù)據(jù)的屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue實(shí)現(xiàn)復(fù)制文字復(fù)制圖片實(shí)例詳解
這篇文章主要為大家介紹了vue實(shí)現(xiàn)復(fù)制文字復(fù)制圖片實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02 
Vue中動(dòng)態(tài)Class實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了Vue中動(dòng)態(tài)Class的實(shí)戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11