web前端高级VUE - vuex中的state/mutations/actions/modules/getters的基本解析及基于代码分析vuex的原理

vuex

• state

• 用于存放组件间互相通信的属性值。
• 原则上state中的属性只能在各个组件之间使用，而不能修改，如果要修改需要在mutations中修改

• mutations

• 这里存放的都是一些函数，用于修改state中的属性值
• 这里的函数中只接收两个参数：state和options
• 原则上这里面的函数必须都是同步的
• 如果某组件中需要修改state中的属性值，则需在该组件中用this.$store.commit(‘方法名’, 参数)的方式来调用，即需要用commit方法来调用mutations中的函数
• 通过commit触发

• actions

• 这里存放的也都是一些函数，这里的函数可以是异步的
• 这里的函数也是接收两个参数：store和options
• 如果这里的函数想要修改state中的值，还是得通过调用mutations中的方法来实现
• 如果想要在组件中调用这里的函数，则需要用dispatch方法调用：this.$store.dispatch(‘方法名’, options)
• 通过dispatch触发

• getters

• 这里也是一些函数，类似于组件中的计算属性
• 可以处理一些通用且复杂的逻辑， 实际使用比较少

• modules

• 用于划分模块
• 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象显得会相当臃肿
• 为了解决上面的问题，Vuex允许将store分割成模块。每个模块拥有自己的state、mutation、action、getter甚至是嵌套子模块
• 如果模块中的mutations或actions重复，则两个重复的方法都会执行
• 如果想区分模块中重复的mutations或actions，则可以在模块中加一个属性：namespace:true即可，调用时需要指定模块名，例如：this.$store.commit(‘模块名/方法名’)

• 一次性引入多个模块

import a from './modules/a.js'
import b from './modules/b.js'
import c from './modules/c.js'
import d from './modules/d.js'
import e from './modules/e.js'
//可以用下面的方法来替换上面的导入
const requireComponent = require.context('./modules', false, /\.js$/);
requireComponent.keys().forEach(item => {
   
	let obj = requireComponent(item).default;
	Vue.component(obj.name, obj);