1-Vuex概述
1.1-Vuex是什么
Vuex是实现组件全局状态即数据管理的一种机制,能够方便地实现组件之间数据的共享。不需要像Vue一样需要层层传递数据,提高开发效率。
1.2-Vuex的优点
- 能够在Vuex中集中管理共享的数据,易于开发和后期维护
- 能够高效地实现组件之间的数据共享,提高开发效率
- 存储在Vuex中的数据都是响应式的,能够实时保持数据与页面的同步
1.3-什么样的数据适合存放在Vuex中?
一般情况下,需要在多个组件之间进行共享的数据适合存放在Vuex中,而某个组件私有的数据内容更适合于放在组件的data中。
2-Vuex的安装步骤
- 安装Vuex依赖包
npm install vuex --save // 安装 Vuex,可能会出现报错,这时就需要修改 Vuex 的版本 // npm install [email protected] --save
- 在新建的store文件中导入Vue和Vuex,并使用use将Vuex安装成Vue的插件
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex);
- 创建一个store实例对象,用于数据的存储和操作,然后导出
const store = new Vuex.Store({ state: { count: 0 }, mutations: {}, actions: {}, }); export default store;
- 在入口文件中进行store的导入并使用
import store from "@/store/store.js"; new Vue({ router, store, render: (h) => h(App), }).$mount("#app");
3-Vuex的核心概念
3.1-State
-
State的作用: State用于提供唯一的公共数据,所有的共享数据都要统一地放到Store的State中进行存储。
-
State在Store中的书写方式:
const store = new Vuex.Store({ state: { count: 0, } })
-
组件访问State中数据的两种方式:
// 方法一:直接通过使用$store进行使用 // this.$store.state.全局数据名称 this.$store.state.count // 方法二:按需导入mapState函数 // 1. 从Vuex中按需导入mapState函数 import { mapState } from "vuex"; // 2. 将当前组件需要的全局数据映射为组件的computed的计算属性 computed: { ...mapState(["count"]) }, // 3. 通过this.count进行使用,在template模板中this可以省略
3.2-Mutation
- Mutation的作用: Mutation用于变更Store中的数据。
- Mutation的注意点:
- 只能通过mutation变更Store中的数据,不能直接操作Store中的数据
- 通过这种方式操作数据稍微繁琐一点,但是能够集中监控所有数据的变化
- Mutation中不能进行异步操作
- Mutation在Store中的书写方式:
const store = new Vuex.Store({ state: { count: 0, }, mutations: { // 只传入单个参数的书写方法: add(state) { state.count++; }, // 传入多个参数的书写方法: addN(state, step) { state.count += step; }, }, })
- Mutation使用的两种方式:
// 方法一:直接通过使用$store的commit进行使用 methods: { // 只传入单个参数的使用方法: handleAdd(){ this.$store.commit('add'); } // 传入多个参数的使用方法: handleAddN() { this.$store.commit("addN", 2); }, } // 方法二:按需导入mapMutations函数 // 1. 从Vuex中按需导入mapMutations函数 import { mapMutations } from "vuex"; // 2. 将要使用的函数方法通过 mapMutations 变成组件的 methods 中的方法来使用 methods: { ...mapMutations(["add", "addN"]), }, // 3. 通过this进行使用 methods: { ...mapMutations(["add", "addN"]), handleAdd() { this.add(); }, handleAddN() { this.addN(3); }, },
3.3-Action
- Action的作用: Action用于处理Mutation 不能处理的异步任务,但是实际上也还是调用了 Mutation 中的方法来对 State 中的数据进行更改,即不能直接对Store中的数据进行变更操作。
- Action在Store中的书写方式:
const store = new Vuex.Store({ state: { count: 0, }, mutations: { // 只传入单个参数的书写方法: add(state) { state.count++; }, // 传入多个参数的书写方法: addN(state, step) { state.count += step; }, }, actions: { // 在 actions 中不能直接修改 state 中的值,必须通过调用 mutations 中的方法进行修改 // 只传入一个参数的书写方法: addAsync(context) { setTimeout(() => { context.commit("add"); }, 1000); }, // 传入多个参数的书写方法: addAsyncN(context, step) { setTimeout(() => { context.commit("addN", step); }, 1000); }, }, })
- Action使用的两种方式:
// 方法一:直接通过使用$store的dispatch进行使用 methods: { // 只传入单个参数的使用方法: handleAddAsync(){ this.$store.dispatch('addAsync'); } // 传入多个参数的使用方法: handleAddAsyncN() { this.$store.dispatch("addAsyncN", 2); }, } // 方法二:按需导入mapActions函数 // 1. 从Vuex中按需导入mapActions函数 import { mapActions} from "vuex"; // 2. 将要使用的函数方法通过 mapActions变成组件的 methods 中的方法来使用 methods: { ...mapActions(["addAsync", "addAsyncN"]), }, // 3. 通过this进行使用 methods: { ...mapActions(["addAsync", "addAsyncN"]), handleAdd() { this.addAsync(); }, handleAddN() { this.addAsyncN(3); }, },
3.4-Getter
- Getter的作用: Getter 不会对 state 中的数据进行修改或者改变,只是将数据进行一个加工处理,换一种展示状态,类似于 Vue 的计算属性。
- Getter在Store中的书写方式:
const store = new Vuex.Store({ state: { count: 0, }, mutations: { // 只传入单个参数的书写方法: add(state) { state.count++; }, // 传入多个参数的书写方法: addN(state, step) { state.count += step; }, }, actions: { // 在 actions 中不能直接修改 state 中的值,必须通过调用 mutations 中的方法进行修改 // 只传入一个参数的书写方法: addAsync(context) { setTimeout(() => { context.commit("add"); }, 1000); }, // 传入多个参数的书写方法: addAsyncN(context, step) { setTimeout(() => { context.commit("addN", step); }, 1000); }, }, getters: { showCount(state) { return `当前的count值为【${state.count}】`; }, }, })
- Getter使用的两种方式:
// 方法一:直接通过使用$store进行使用 // this.$store.getters.名称 this.$store.getters.showCount // 方法二:按需导入mapGetters函数 // 1. 从Vuex中按需导入mapGetters函数 import { mapGetters} from "vuex"; // 2. 将当前组件需要的数据映射为组件的computed的计算属性 computed: { ...mapGetters(["showCount"]), }, // 3. 通过this.showCount进行使用,在template模板中this可以省略