vuex中namespace作用,
这篇文章主要介绍了状态管理模块化和命名空间命名空间的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
1. 目的：
让代码更好维护，让多种数据分类更加明确。
2. 修改store/index.js
store/index.js
const countAbout={
命名空间：true，//开启命名空间
状态：{x:1}，
突变：{.},
动作：{.},
getters: {
大和(州){
返回state.sum * 10
}
}
}
const personAbout={
命名空间：true，//开启命名空间
状态：{.},
突变：{.},
动作：{.}
}
const store=new Vuex .商店({
模块：{
大约
个人简介
}
})
注意：命名空间：真的，要开启命名空间
3. 开启命名空间后，组件中读取state数据：
//方式一：自己直接读取
这个store . state . persona about . list
//方式二：借助地图状态读取：
.mapState(countAbout ，[sum ， school ， subject])，
4. 开启命名空间后，组件中读取getters数据：
//方式一：自己直接读取
这个100美元商店。getters[个人简介/名字]
//方式二：借助地图获取者读取：
.mapGetters(countAbout ，[bigSum])
5. 开启命名空间后，组件中调用dispatch
//方式一：自己直接派遣
这个100美元商店。派遣(人约/添加人王，人)
//方式二：借助地图操作：
.mapActions(countAbout ，{ increment add: jiaOdd ，incrementWait:jiaWait})
开启命名空间后，组件中调用犯罪
//方式一：自己直接犯罪
这个100美元商店。提交(“人物角色关于/添加人物”，人物)
//方式二：借助地图突变：
.mapMutations(countAbout ，{增量：贾，减量： JIAN})，
例子：
菲尼克斯：
总代码：
main.js
//引入某视频剪辑软件
从“vue”导入某视频剪辑软件
//引入应用
从导入应用程序 App.vue
//引入商店
从导入存储。/商店
//关闭某视频剪辑软件的生产提示
Vue.config.productionTip=false
//创建伏特计
新Vue({
埃尔： #app ，
render: h=h(App)，
店，
创建之前(){
Vue.prototype.$bus=this
}
})
App.js
模板
差异
计数/
整点
人/
/div
/模板
脚本
从导入计数。/组件/计数
从导入人员。/组件/人
导出默认值{
名称："应用程序",
组件：{计数，人员},
}
/脚本
store/index.js
//该文件用于创建状态管理中最为核心的商店
从“vue”导入某视频剪辑软件
//引入状态管理
从" vuex "导入状态管理
从导入countOptions ./count
从导入人员选项。/人
//应用状态管理插件
Vue.use(Vuex)
//创建并暴露商店
导出默认的新Vuex .商店({
模块：{
countAbout:countOptions，
个人简介：个人选项
}
})
store/count.js
//求和相关的配置
导出默认值{
命名空间：对，
动作：{
焦德(上下文，值){
console.log(操作中的焦德被调用了)
if(context.state.sum % 2){
context.commit(JIA ，值)
}
},
嘉等待(上下文，值){
console.log(操作中的加瓦特被调用了)
setTimeout(()={
context.commit(JIA ，值)
},500)
}
},
突变：{
贾（状态，值){
console.log(突变中的贾（中国姓氏)被调用了)
state.sum=值
},
简（状态，值){
console.log(突变中的简被调用了)
state.sum -=值
},
},
状态：{
总和：0,//当前的和
学校：尚硅谷，
主题：前端，
},
getters:{
大和(州){
返回state.sum*10
}
},
}
store/person.js
//人员管理相关的配置
从" axios "导入爱可信
从“纳米机器人”导入{ nanoid }
导出默认值{
命名空间：对，
动作：{
addPersonWang(上下文，值){
if(value.name.indexOf(王)===0){
context.commit(ADD_PERSON ，值)
}否则{
警报(添加的人必须姓王!)
}
},
addPersonServer(上下文){
axios。获取( https://API。uix SJ。cn/hito koto/get？type=social’).然后（
响应={
context.commit(ADD_PERSON ，{id:nanoid()，name:response.data})
},
错误={
警报（错误消息)
}
)
}
},
突变：{
ADD_PERSON(state，value){
console.log(突变中的添加_个人被调用了)
state.personList.unshift(值)
}
},
状态：{
人员列表：[
{id:001 ，名称：张三}
]
},
getters:{
名字（州){
返回state.personList[0].名字
}
},
}
components/Count.vue
模板
差异
氕当前求和为：{{sum}}/h1
h3当前求和放大10倍为：{{bigSum}}/h3
h3我在{ {学校}},学习{{subject}}/h3
h3 style=color:redPerson组件的总人数是：{{personList.length}}/h3
选择垂直型号。编号=n
选项值= 1 1/选项
选项值= 2 2/选项
选项值= 3 3/选项
/选择
按钮@click=增量(n)/按钮
按钮@click=减量(n)-/按钮
button @ click= increment add(n)当前求和为奇数再加/按钮
button @click=incrementWait(n)等一等再加/按钮
/div
/模板
脚本
从" vuex "导入{mapState，mapGetters，mapMutations，mapActions}
导出默认值{
姓名：计数，
data() {
返回{
n:1，//用户选择的数字
}
},
计算值：{
//借助地图状态生成计算属性，从状态中读取数据。(数组写法)
.mapState(countAbout ，[sum ， school ， subject])，
.mapState( persona about ，[personList])，
//借助地图获取者生成计算属性，从吸气剂中读取数据。(数组写法)
.mapGetters(countAbout ，[bigSum])
},
方法：{
//借助地图突变生成对应的方法，方法中会调用犯罪去联系突变（对象写法)
.mapMutations(countAbout ，{增量：贾，减量： JIAN})，
//借助地图操作生成对应的方法，方法中会调用派遣去联系动作（对象写法)
.mapActions(countAbout ，{ increment add: jiaOdd ，incrementWait:jiaWait})
},
已安装(){
console.log(这个$商店)
},
}
/脚本
style lang=css
按钮{
左边距：5px
}
/风格
components/Person.vue
模板
差异
氕人员列表/h1
h3 style=颜色：红色计数组件求和为：{{sum}}/h3
h3列表中第一个人的名字是：{ {第一个人的名字}}/h3
输入类型=text placeholder=请输入名字v-model=name
按钮@click=添加添加/按钮
button @click=addWang 添加一个姓王的人/按钮
button @click=addPersonServer 添加一个人，名字随机/按钮
保险商实验所
Li v-for= p in person list :key= p . id { { p . name } }/Li
/ul
/div
/模板
脚本
从“纳米机器人”导入{nanoid}
导出默认值{
姓名：人，
data() {
返回{
名称：""
}
},
计算值：{
人员列表(){
归还这个100美元商店。状态。周围的人。人员列表
},
sum(){
归还这个store.state.countAbout.sum
},
firstPersonName(){
归还这个100美元商店。getters[个人简介/名字]
}
},
方法：{
add(){
const personObj={id:nanoid()，name:this.name}
这个100美元商店。提交(“人物角色关于/添加人物”，人物对象)
this.name=
},
addWang(){
const personObj={id:nanoid()，name:this.name}
这个100美元商店。派遣(人员简介/添加人员王，人员对象)
this.name=
},
addPersonServer(){
这个100美元商店。派遣( persona about/addPersonServer )
}
},
}
/脚本
到此这篇关于状态管理模块化和命名空间命名空间的文章就介绍到这了，更多相关状态管理模块化和命名空间内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。