Vue/Vuex ( modules )介绍、命名空间namespaced命名空间时注意事项、命名空间时提交模块中的mutation

一. modules

语法:

// 定义 

const moduleA = {

 state: {

name="张三",

age：18

},

 mutations: { ... },

 actions: { ... },

 getters: { ... }

 }

const moduleB = {  

state: { ... },

 mutations: { ... },

 actions: { ... }

 }

onst store = new Vuex.Store({

    // namespaced为true，则在使用mutations时，就必须要加上模块名

  namespaced:true,

 modules: {  

  moduleA,

   moduleB

})

// 接收

$store.state.模块名.xxx

介绍: 由于使用单一状态树 应用的所有的状态会集中到一个比较大的对象 当应用变得非常复杂时 store对象就有可能变得相当臃肿 为了解决问题 vuex允许将store分割成模块 (module) 每个模块拥有自己的 state 、 motation 、action、getter 甚至是嵌套子模块 

说明: 能够在大型项目中 更加细化我们的状态管理 使得结构更加清晰 当然也会稍微有点复杂

使用场景: 在项目开发过程中 随着项目逐渐增大 数据关联复杂逐渐加大 多人协同开发 人员变动等 遇到vuex数据更新时 执行某个action导致同名/未预测到关联数据发生了变化

二.命名空间 namespaced

语法:

//开启命令空间
const moduleA ={
    namespaced:true,  //开启namespace:true，该模块就成为命名空间模块了
    state:{
        count:10,
        countA:888
    },
    getters:{...},
    mutations:{...},
    actions:{...}
}

//组件中获取带有命名空间 modules 中的 state数据
//1.辅助函数
computed:{ 
 ...mapState('模块名',['mutation内函数名'])
}

说明:

1.Vuex由于使用单一状态树 应用的所有状态会集中到一个比较大的对象 当应用变得非常复杂时 store对象就有可能变得相当臃肿

2. 因此 vuex允许将store分割成模块(module) 每个模块拥有自己的 state mutation action getter 甚至是嵌套子模块

介绍 : 默认情况下 模块内部的 action mutation 和 getter 是注册在全局命名空间的 这样使得多个模块能够对同一 mutation 或 action 作出响应 如希望模块具有更高的封装度 和 复用性 就可以使用命名空间

怎么让模块成为命名空间: 在单个模块中通过添加 namespaced:true 的方式使得其成为带命名空间的模块

注意: 当开启命名空间时 mutation函数名左边加module内模块名  

示列:

1.this.$store.commit('模块名/mutation内函数名',实参 )

2.this.$store.dispatch('模块名/mutation内函数名',实参 )

三.命名空间时提交模块中的mutation

语法:

//模块中

this.$store.commit('模块名/mutation内函数名',实参 )