Vuex模塊化和命名空間namespaced實例演示
更新時間：2021年11月15日 10:37:23 作者：533_
這篇文章主要介紹了Vuex模塊化和命名空間namespaced的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1. 目的：
讓代碼更好維護，讓多種數(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'
//關閉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'
//應用Vuex插件
Vue.use(Vuex)
//創(chuàng)建并暴露store
export default new Vuex.Store({
modules:{
countAbout:countOptions,
personAbout:personOptions
}
})
store/count.js
//求和相關的配置
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, //當前的和
school:'尚硅谷',
subject:'前端',
},
getters:{
bigSum(state){
return state.sum*10
}
},
}
store/person.js
//人員管理相關的配置
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>當前求和為：{{sum}}</h1>
<h3>當前求和放大10倍為：{{bigSum}}</h3>
<h3>我在{{school}}，學習{{subject}}</h3>
<h3 style="color:red">Person組件的總人數(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)">當前求和為奇數(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生成計算屬性，從state中讀取數(shù)據(jù)。（數(shù)組寫法）
...mapState('countAbout',['sum','school','subject']),
...mapState('personAbout',['personList']),
//借助mapGetters生成計算屬性，從getters中讀取數(shù)據(jù)。（數(shù)組寫法）
...mapGetters('countAbout',['bigSum'])
},
methods: {
//借助mapMutations生成對應的方法，方法中會調(diào)用commit去聯(lián)系mutations(對象寫法)
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
//借助mapActions生成對應的方法，方法中會調(diào)用dispatch去聯(lián)系actions(對象寫法)
...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>列表中第一個人的名字是：{{firstPersonName}}</h3>
<input type="text" placeholder="請輸入名字" v-model="name">
<button @click="add">添加</button>
<button @click="addWang">添加一個姓王的人</button>
<button @click="addPersonServer">添加一個人，名字隨機</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>
到此這篇關于Vuex模塊化和命名空間namespaced的文章就介紹到這了,更多相關Vuex模塊化和命名空間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在后臺管理系統(tǒng)，可以根據(jù)登錄用戶的不同返回不同路由，頁面也會根據(jù)這些路由生成對應的菜單，本文主要介紹了vue3動態(tài)路由+菜單欄的實現(xiàn)示例，感興趣的可以了解一下2024-04-04
vue3中ts語法使用element plus分頁組件警告錯誤問題
這篇文章主要介紹了vue3中ts語法使用element plus分頁組件警告錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了在vue中封裝的彈窗組件使用隊列模式實現(xiàn)方法,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要介紹了如何使用Vite構建vue項目的相關資料,本文主要介紹了Vite構建Vue項目的詳細步驟,包括檢查node.js和pnpm的安裝,構建Vite+Vue項目,利用HBuilderX導入項目,需要的朋友可以參考下2024-10-10
Vue 中 filter 與 computed 的區(qū)別與用法解析
這篇文章主要介紹了Vue 中 filter 與 computed 的區(qū)別與用法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
Vue中使用elementui與Sortable.js實現(xiàn)列表拖動排序
這篇文章主要為大家詳細介紹了Vue中使用elementui與Sortable.js實現(xiàn)列表拖動排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了ant-design-vue按需加載的坑的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
使用自動導入后eslint報錯eslint9的問題及解決方法
本文介紹了使用`pnpm create vue@latest`創(chuàng)建Vue應用時,如何配置ESLint和Prettier,包括解決兩者沖突以及自動導入后Eslint報錯的問題,感興趣的朋友一起看看吧2025-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端返回頂部，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
Vue 將后臺傳過來的帶html字段的字符串轉換為 HTML
這篇文章主要介紹了Vue 將后臺傳過來的帶html字段的字符串轉換為 HTML ,需要的朋友可以參考下2018-03-03