Vuex的详细解读之手把手教学篇（二）

最新推荐文章于 2025-03-15 10:05:25 发布

勇敢小陈

最新推荐文章于 2025-03-15 10:05:25 发布

阅读量322

点赞数

本文链接：https://blog.youkuaiyun.com/ct5211314/article/details/129811462

版权

文章详细介绍了Vuex中的Action特性，包括它与Mutation的区别，如何声明和触发Action。接着讨论了Vuex的Module模块化，解释了为何及如何拆分状态管理，以及如何通过命名空间提高模块封装性和复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

六、Action属性的用法

1.Action说明

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作
Action 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise。所以可以通过.then去接收处理返回的结果。

2.声明方法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//单一数据数，一个对象包含了全部的应用层级状态。
export default new Vuex.Store({
  //全局状态的数据源，相当于data。
  state: {
    num: 0,
    list: [
      {
        name: '张三',
        id: 1,
        type: 1
      },
      {
        name: '李四',
        id: 2,
        type: 2
      },
    ]
  },
  // 在 store 中的 state 中派生出状态，相当于store的计算属性。
  getters: {
    //接收两个参数，第一个参数接收state，也可以接收其他的getters作为参数。
    doneNum(state) {
      return state.num + 10
    },
    doneList(state, getters) {
      return state.list.find(item => item.type === 1).name + getters.doneNum
    },
    //也可以返回一个函数用于数据的查询等操作
    getData: (state) => (id) => {
      return state.list.find(item => item.id === id)
    }
  },
  //更改Vuex的store中状态的唯一方法就是提交mutations。
  // 可接收多个参数，第一个参数为state。
  //可以理解为在mutations我们可以声明多个用于更改state的方法并在需要的时候，通过commit方法去触发对应的方法从而更改store里面的状态。
  mutations: {
    changNum(state, data) {
      state.num += data.price
    }
  },
  actions: {
    //Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
    //因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
    changNum({ commit, state, getters }, data) {
      commit('changNum', data)
    }
  },
  modules: {
  }
})

3.触发actions方法

<template>
  <div>
    <h1>{{ num }}</h1>
    <button @click="add({ price: 2 })">点我触发mutation更改store的状态</button>
    <button @click="changNum">点我触发actions更改store的状态</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["num"]),
    ...mapGetters({
      doneName: "doneList",
    }),
  },
  data() {
    return {
      name: "小陈",
    };
  },
  methods: {
    ...mapMutations({
      add: "changNum",
    }),
    //写法1：
    //直接通过$store.dispatch触发
    // changNum(){
    //   this.$store.dispatch('changNum',{ price: 2})
    // }
    // 写法二：通过type属性指定提交
    //需要注意的是这样触发actions方法时，整个对象会作为第二个参数传递到actions的方法中
    changNum() {
      this.$store.dispatch({
        type: "changNum",
        price: 2,
      });
    },
    
  },
  created() {
    console.log(this.$store.state.num);
  },
};
</script>

<style>
</style>

4.通过mapActions辅助函数优化Actions内方法的触发

<template>
  <div>
    <h1>{{ num }}</h1>
    <button @click="add({ price: 2 })">点我触发mutation更改store的状态</button>
    <button @click="add({ price: 2 })">点我触发actions更改store的状态</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations , mapActions} from "vuex";
export default {
  computed: {
    ...mapState(["num"]),
    ...mapGetters({
      doneName: "doneList",
    }),
  },
  data() {
    return {
      name: "小陈",
    };
  },
  methods: {
    ...mapMutations({
      add: "changNum",
    }),
    //写法1：
    //直接通过$store.dispatch触发
    // changNum(){
    //   this.$store.dispatch('changNum',{ price: 2})
    // }
    // 写法二：通过type属性指定提交
    //需要注意的是这样触发actions方法时，整个对象会作为第二个参数传递到actions的方法中
    // changNum() {
    //   this.$store.dispatch({
    //     type: "changNum",
    //     price: 2,
    //   });
    // },



    //通过展开运算符将mapActions混入到外部对象中
    //传递参数的话，可以在触发时直接传递
    // ...mapActions(['changNum']),
    //当需要重新命名时
    ...mapActions({
      add:'changNum'
    }),
  },
  created() {
    console.log(this.$store.state.num);
  },
};
</script>

<style>
</style>

七、Module模块化属性说明

1.Module属性介绍

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

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

2.对原有文件进行拆分实现模块化

在实际项目开发中可能存在多个功能模块，为了项目的模块化需要对项目的目录结构以及命名进行对应的处理，使我们的项目更易维护。

例如我们上面的讲解主要通过更改num来进行验证的，所以我们可以将其拿出来生成一个单独的文件。

下面开始实现，新建store_module文件夹进行各模块vuex相关方法数据的存放，在index文件中进行引入。

目录结构：

num.js

export default  {
	//全局状态的数据源，相当于data。
	state: {
		num: 0,
		list: [
			{
				name: '张三',
				id: 1,
				type: 1
			},
			{
				name: '李四',
				id: 2,
				type: 2
			},
		]
	},
	// 在 store 中的 state 中派生出状态，相当于store的计算属性。
	getters: {
		//接收两个参数，第一个参数接收state，也可以接收其他的getters作为参数。
		doneNum(state) {
			return state.num + 10
		},
		doneList(state, getters) {
			return state.list.find(item => item.type === 1).name + getters.doneNum
		},
		//也可以返回一个函数用于数据的查询等操作
		getData: (state) => (id) => {
			return state.list.find(item => item.id === id)
		}
	},
	//更改Vuex的store中状态的唯一方法就是提交mutations。
	// 可接收多个参数，第一个参数为state。
	//可以理解为在mutations我们可以声明多个用于更改state的方法并在需要的时候，通过commit方法去触发对应的方法从而更改store里面的状态。
	mutations: {
		changNum(state, data) {
			state.num += data.price
		}
	},
	actions: {
		//Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
		//因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
		changNum({ commit, state, getters }, data) {
			commit('changNum', data)
		}
	},
	modules: {
	}
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import num from './store_module/num'

Vue.use(Vuex)

//单一数据数，一个对象包含了全部的应用层级状态。
export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    num
  }
})

对应的取值就变成了

对应的其他的（action ，mutation ，getters ）不用进行更改，这是对于状态进行了模块的区分。

对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：

3.通过命名空间进行进一步的封装处理

1.为什么要开始命名空间

在上述情况下，模块内部的 action 和 mutation 仍然是注册在全局命名空间的——这样使得多个模块能够对同一个 action 或 mutation 作出响应。Getter 同样也默认注册在全局命名空间，但是目前这并非出于功能上的目的（仅仅是维持现状来避免非兼容性变更）。必须注意，不要在不同的、无命名空间的模块中定义两个相同的 getter 从而导致错误。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

2.命名空间的说明

通过namespaced: true,属性开启命名空间

export default  {
	namespaced: true,
	//全局状态的数据源，相当于data。
	state: {
		num: 0,
		list: [
			{
				name: '张三',
				id: 1,
				type: 1
			},
			{
				name: '李四',
				id: 2,
				type: 2
			},
		]
	},
	// 在 store 中的 state 中派生出状态，相当于store的计算属性。
	getters: {
		//接收两个参数，第一个参数接收state，也可以接收其他的getters作为参数。
		doneNum(state) {
			return state.num + 10
		},
		doneList(state, getters) {
			return state.list.find(item => item.type === 1).name + getters.doneNum
		},
		//也可以返回一个函数用于数据的查询等操作
		getData: (state) => (id) => {
			return state.list.find(item => item.id === id)
		}
	},
	//更改Vuex的store中状态的唯一方法就是提交mutations。
	// 可接收多个参数，第一个参数为state。
	//可以理解为在mutations我们可以声明多个用于更改state的方法并在需要的时候，通过commit方法去触发对应的方法从而更改store里面的状态。
	mutations: {
		changNum(state, data) {
			state.num += data.price
		}
	},
	actions: {
		//Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
		//因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
		changNum({ commit, state, getters }, data) {
			commit('changNum', data)
		}
	},
	modules: {
	}
}

3.在带命名空间的模块内访问全局内容

如果你希望使用全局 state 和 getter，rootState 和 rootGetters 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action。

若需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。

modules: {
  foo: {
    namespaced: true,

    getters: {
      // 在这个模块的 getter 中，`getters` 被局部化了
      // 你可以使用 getter 的第四个参数来调用 `rootGetters`
      someGetter (state, getters, rootState, rootGetters) {
        getters.someOtherGetter // -> 'foo/someOtherGetter'
        rootGetters.someOtherGetter // -> 'someOtherGetter'
        rootGetters['bar/someOtherGetter'] // -> 'bar/someOtherGetter'
      },
      someOtherGetter: state => { ... }
    },

    actions: {
      // 在这个模块中， dispatch 和 commit 也被局部化了
      // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
      someAction ({ dispatch, commit, getters, rootGetters }) {
        getters.someGetter // -> 'foo/someGetter'
        rootGetters.someGetter // -> 'someGetter'
        rootGetters['bar/someGetter'] // -> 'bar/someGetter'

        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }
}

4.在带命名空间的模块注册全局 action

若需要在带命名空间的模块注册全局 action，你可添加 root: true，并将这个 action 的定义放在函数 handler 中。

{
  actions: {
    someOtherAction ({dispatch}) {
      dispatch('someAction')
    }
  },
  modules: {
    foo: {
      namespaced: true,

      actions: {
        someAction: {
          root: true,
          handler (namespacedContext, payload) { ... } // -> 'someAction'
        }
      }
    }
  }
}

5.开启命名空间后的数据取值以及方法触发

未开启命名空间前的取值以及方法

<template>
  <div>
    <h1>{{ num.num }}</h1>
    <div>{{ doneName }}</div>
    <button @click="add({ price: 2 })">点我触发mutation更改store的状态</button>
    <button @click="add({ price: 2 })">点我触发actions更改store的状态</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations , mapActions} from "vuex";
export default {
  computed: {
    ...mapState(["num"]),
    ...mapGetters({
      doneName: "doneList",
    }),
  },
  data() {
    return {
      name: "小陈",
    };
  },
  methods: {
    ...mapMutations({
      add: "changNum",
    }),
    ...mapActions({
      add:'changNum'
    }),
  },
  created() {
  },
};
</script>

<style>
</style>

开始命名空间后的取值以及方法

<template>
  <div>
    <h1>{{ num }}</h1>
    <div>{{ doneName }}</div>
    <button @click="add({ price: 2 })">点我触发mutation更改store的状态</button>
    <button @click="add({ price: 2 })">点我触发actions更改store的状态</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations , mapActions} from "vuex";
export default {
  computed: {
    ...mapState({
      num:state=>state.num.num
    }),
    ...mapGetters({
      doneName: "num/doneList",
    }),
  },
  data() {
    return {
      name: "小陈",
    };
  },
  methods: {
    ...mapMutations({
      add: "num/changNum",
    }),
    ...mapActions({
      add:'num/changNum'
    }),
  },
  created() {
  },
};
</script>

<style>
</style>

对于上述来说，可能引入多个的话，会出现重复的引入路径，导致代码臃肿，所以可以进行简化，简化后的代码。

<template>
  <div>
    <h1>{{ num }}</h1>
    <div>{{ doneName }}</div>
    <button @click="add({ price: 2 })">点我触发mutation更改store的状态</button>
    <button @click="add({ price: 2 })">点我触发actions更改store的状态</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations , mapActions} from "vuex";
export default {
  computed: {
    ...mapState('num',{
      num:state=>state.num
    }),
    ...mapGetters('num',{
      doneName: "doneList",
    }),
  },
  data() {
    return {
      name: "小陈",
    };
  },
  methods: {
    ...mapMutations('num',{
      add: "changNum",
    }),
    ...mapActions('num',{
      add:'changNum'
    }),
  },
  created() {
  },
};
</script>

<style>
</style>