西安博威建设工程有限公司招聘网站,深圳住房建设局网站首页,wordpress超级编辑器,wordpress与thinkphp当我们的项目很大的时候#xff0c;VueX中的代码会越来越多#xff0c;会有处理数据的#xff0c;处理人员列表的#xff0c;处理订单的...
如果我们将这些东西都写在一个state、actions和mutations中的话#xff0c;就非常不方便后期的维护。
所以我们引入了VueX的模块…当我们的项目很大的时候VueX中的代码会越来越多会有处理数据的处理人员列表的处理订单的...
如果我们将这些东西都写在一个state、actions和mutations中的话就非常不方便后期的维护。
所以我们引入了VueX的模块化的概念每一个模块存储对应操作的数据和方法方便后期的维护。 一、创建模块化
我们将不同功能区间组成不同的模块每一个模块中都有与之对应的state, getters, actions, mutations。 { namespace:true, actions:{}, mutations:{}, state:{}, getters:{} } 我们也可以将一个模块放在一个js文件中进行暴露然后在index.js中引入 二、注册模块 export default new VueX.Store({ modules:{ 模块1, 模块2 } }) 三、读取模块中的数据
一读取state中的数据
1. 直接读取 this.$store.模块名.数据名 2. mapState读取 ...mapState(模块名, [数据1, 数据2]) 二读取getters中的数据
1. 直接读取 this.$store.getters[模组名 / 数据名]; 2. mapGetters读取 ...mapGetters(模块名, [数据1, 数据2]) 三调用dispatch
1. 直接读取 this.$store.dispatch(模块名 / 方法名, value) 2. mapActions读取 ...mapActions(模块名, {新方法名1 : 方法名1, 新方法名2 : 方法名2}) 四调用commit
使用方法和调用dispatch一致
1. 直接读取 this.$store.commit(模块名 / 方法名, value) 2. mapMutations读取 ...mapMutations(模块名, {新方法名1 : 方法名1, 新方法名2 : 方法名2})
