六、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
}
})
对应的取值就变成了
<h1>{ { num.num }}</h1>
对应的其他的（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>