【黑马程序员】Vuex从入门到实战

<template>
  <div>
    hello world.
    <hr />
    <span>加法组件</span>
    <addition-vue></addition-vue>
    <span>减法组件</span>
    <subtraction-vue></subtraction-vue>
  </div>
</template>

<script>
import AdditionVue from "./components/Addition.vue";
import SubtractionVue from "./components/Subtraction.vue";

export default {
  data() {
    return {};
  },
  components: {
    SubtractionVue,
    AdditionVue,
  },
};
</script>

创建加法和减法子组件。

Addition.vue

<template>
  <div>
    <h3>当前最新的count值为：{{}}</h3>
    <button>
        +1
    </button>
  </div>
</template>

<script>
export default {
    data() {
        return {};
    }
};
</script>

Subtraction.vue

<template>
  <div>
    <h3>当前最新的count值为：{{}}</h3>
    <button>-1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

未完待续（结合第4章进行补充）

4 Vuex的核心概念

Vuex的核心概念有以下几个：

State
Mutation
Action
Getter

4.1 State

4.1.1 State介绍

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。

创建Store数据源，提供唯一公共数据源

const store = new Vuex.store({ 
    state: {count: 0}
})

4.1.2 访问共享数据方式

1 方式1

组件访问State中数据的第一种方式：

this.$store.state.全局数据名称

在vuex里，定义共享数据count，放在vuex实例的节点state中，

3.2 案例，在加法和减法组件中访问state中的count值。

效果

访问成功，成功显示count数值。

2 方式2

组件访问State中数据的第二种方式。

1 从Vuex中按需导入mapState函数

import { mapState } from 'vuex'

通过刚才导入的mapState函数，将当前组件需要的全局函数，映射为当前组件的computed计算属性；

2 将全局数据，映射为当前组件的计算属性

computed: { 
    ...mapState(['count'])
}

3.2案例，减法组件

效果

3 总结

以上2种方式，使用哪种方式访问State数据，具体视项目情况而定。

4.2 Mutation

4.2.1 Mutation介绍

Mutation用于变更store中的数据。

改变store对象的state节点里的共享数据。

只能通过mutation变更Store数据，不可以直接操作Store中的数据.
1. vue中不允许组件直接去修改store里的数据（可以实现，但是不允许这样做）。
通过这种方式虽然操作起来繁琐，但可以集中监视所有数据的变化
1. 通过this.$store.state.全局数据名称去修改数据，如果项目十分庞大，出现：store中数据发生变化，但是不清楚谁修改了state里的数据。即，这种方式不利于后期维护

4.2.2 Mutation基础使用

1 定义mutations

1.1 在state同一层级，定义mutations节点。

1.2 mutations对应一个对象，里面放多个事件处理函数。add里接收的参数，就是当前state对象。

const store = new Vuex.store({ 
    state: {
        count: 0
    },
    mutations: {
        add(state) {
            state.count++;     
        }
    }
})

2 调用mutations

触发mutation

methods: {
    handle1() {
        this.$store.commit('add')
    }
}

3 案例演示

定义mutations

调用mutations

效果

实现自增

4.2.3 Mutation传递参数

可以在触发mutations时传递参数。

1 定义mutations

const store = new Vuex.store({ 
    state: {
        count: 0
    },
    mutations: {
        addN(state, step) {
            state.count+=step;     
        }
    }
})

2 调用mutations

methods: {
    handle1() {
        this.$store.commit('addN', 2)
    }
}

3 案例演示

定义mutations

触发mutations

效果

4.2.4 触发Mutation函数的第2种方式

this.$store.commit()是触发mutations的第一种方式，触发mutations的第2种方式：

1 从Vuex中按需导入 mapMutations 函数

import { mapMutations } from 'vuex'

通过刚才导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的methods方法；

2 将指定的mutations函数，映射为当前组件的 methods 方法

mehtods: { 
    ...mapMutations(['add', 'addN'])
}

3 案例演示

定义mutations

映射mutations，触发mutations

效果

可以自己练习使用Mutation传递参数实现自减N。

4.2.5 案例-延时计数器

本人浏览器装了vue devtools，但是f12还是不出现vue。

延时计数器案例。

mutations里不能写异步代码，比如setTimeout方法（是一个异步函数，如果写了，那么Vuex调试器就不能正常工作了）。

4.3 Action

4.3.1 Action介绍

书接上文，如果一定要执行异步操作，可以使用Action（专门处理异步任务）。

如果通过异步操作变更数据，必须通过Action，而不能使用Mutation。但是在Action中还是要通过触发Mutation的方式间接变更数据。

4.3.2 Action基础使用

1 定义actions

这里形参context相当于new出来的Vuex实例对象store

在actions中，不能直接修改 state 中的数据；

必须通过context.commit() 触发某个 mutation 才可以

以上事实符合：如果要修改State中的数据，必须通过mutations进行。

const store = new Vuex.store({ 
    state: {
        count: 0
    },
    mutations: {
        add(state) {
            state.count++;     
        }
    },
    actions: {
        addAsync(context) {
            setTimeout(()=>{
                context.commit('add')
            }, 1000)
        }
    }
})

2 触发actions

dispatch就是触发actions中某个对应的函数。

methods: {
    handle1() {
        this.$store.dispatch('addAsync')
    }
}

3 案例演示

在计数器中实现异步自增的操作

定义actions

这里形参context相当于new出来的Vuex实例对象store

调用actoins

效果

监听器（f12出现的vue devtools）也可以监听到数据的变化。

总结：commit，触发某个mutation；dispatch，触发某个action；state，访问state中的数据。

4.3.3 Action传递参数

触发actions异步任务时携带参数。

1 定义actions

const store = new Vuex.store({ 
    state: {
        count: 0
    },
    mutations: {
        add(state) {
            state.count++;     
        }
    },
    actions: {
        addAsync(context, step) {
            setTimeout(()=>{
                context.commit('add', step)
            }, 1000)
        }
    }
})

2 触发actions

methods: {
    handle1() {
        this.$store.dispatch('addAsync', 5)
    }
}

3 案例演示

效果

4.3.4 触发Action函数的第2种方式

this.$store.dispatch()是触发actions的第一种方式，触发actions的第2种方式：

1 从Vuex中按需导入 mapActions 函数

import { mapActions } from 'vuex'

通过刚才导入的 mapActions 函数，将需要的 actions函数，映射为当前组件的methods方法；

2 将指定的acitons函数，映射为当前组件的 methods 方法

mehtods: { 
    ...mapActions(['add', 'addN'])
}

3 案例演示

定义actions

映射mutations，触发mutations

效果

简化代码：因为使用mapAction将actions里的方法映射为减法子组件的方法，所以可以直接将按钮绑定的事件处理函数写作actions里的方法，例如下图

可以自己练习使用Action传递参数实现自减N。

4.4 Getter

4.4.1 Getter介绍

Getter用于对Store中的数据进行加工处理形成新的数据。

Getter不会修改Store里的原数据，只起到包装器的作用。

1 Getter可以对Store里已有的数据加工处理之后形成新的数据，类似Vue的计算属性。

2 Store中的数据发生变化，Getter加工处理的数据也会跟着变化---->响应式操作

4.4.2 Getter使用

1 定义Getter

新增getter节点

const store = new Vuex.store({ 
    state: {
        count: 0
    },
    getters: {
        showNum: state => {
            return '当前最新的数量是【' + state.count + '】'
        }
    }
})

2 使用getters方式

第1种方式

this.$store.getters.名称

第2种方式

import { mapGetters } from 'vuex'

computed: {

...mapGetters(['showNum'])

}

3 案例演示

定义getters

使用getters方式1

使用getters方式2

效果

5 基于Vuex的案例

实现了一个小项目，这部分知识也不难，up讲课条理清晰，这里的小项目就不看了。

abigale03

关注

24
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
【黑马程序员】Vuex从入门到实战

Vuex 是什么？| VuexVuex是实现组件全局状态（数据）管理的一种机制，可以方便实现组件之间数据的共享。Vuex主要是实现数据共享。Vuex的数据也可以称为状态。State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。创建Store数据源，提供唯一公共数据源})以上2种方式，使用哪种方式访问State数据，具体视项目情况而定。Mutation用于变更store中的数据。改变store对象的state节点里的共享数据。
复制链接

扫一扫