Vuex模块化和命名空间namespaced实例演示_vue.js
这篇文章主要介绍了Vuex模块化和命名空间namespaced的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
1. 目的：
让代码更好维护，让多种数据分类更加明确。
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数据：
//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
…mapState(\’countAbout\’,[\’sum\’,\’school\’,\’subject\’]),
4. 开启命名空间后，组件中读取getters数据：
//方式一：自己直接读取
this.$store.getters[\’personAbout/firstPersonName\’]
//方式二：借助mapGetters读取：
…mapGetters(\’countAbout\’,[\’bigSum\’])
5. 开启命名空间后，组件中调用dispatch
//方式一：自己直接dispatch
this.$store.dispatch(\’personAbout/addPersonWang\’,person)
//方式二：借助mapActions：
…mapActions(\’countAbout\’,{incrementOdd:\’jiaOdd\’,incrementWait:\’jiaWait\’})
开启命名空间后，组件中调用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的生产提示
Vue.config.productionTip = false
//创建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
//该文件用于创建Vuex中最为核心的store
import Vue from \’vue\’
//引入Vuex
import Vuex from \’vuex\’
import countOptions from \’./count\’
import personOptions from \’./person\’
//应用Vuex插件
Vue.use(Vuex)
//创建并暴露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被调用了\’)
if(context.state.sum % 2){
context.commit(\’JIA\’,value)
}
},
jiaWait(context,value){
console.log(\’actions中的jiaWait被调用了\’)
setTimeout(()=>{
context.commit(\’JIA\’,value)
},500)
}
},
mutations:{
JIA(state,value){
console.log(\’mutations中的JIA被调用了\’)
state.sum += value
},
JIAN(state,value){
console.log(\’mutations中的JIAN被调用了\’)
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被调用了\’)
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组件的总人数是：{{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)\”>当前求和为奇数再加</button>
<button @click=\”incrementWait(n)\”>等一等再加</button>
</div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from \’vuex\’
export default {
name:\’Count\’,
data() {
return {
n:1, //用户选择的数字
}
},
computed:{
//借助mapState生成计算属性，从state中读取数据。（数组写法）
…mapState(\’countAbout\’,[\’sum\’,\’school\’,\’subject\’]),
…mapState(\’personAbout\’,[\’personList\’]),
//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
…mapGetters(\’countAbout\’,[\’bigSum\’])
},
methods: {
//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
…mapMutations(\’countAbout\’,{increment:\’JIA\’,decrement:\’JIAN\’}),
//借助mapActions生成对应的方法，方法中会调用dispatch去联系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模块化和命名空间内容请搜索3399IT网以前的文章或继续浏览下面的相关文章希望大家以后多多支持3399IT网！
本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com
