Vue学习（二十）vuex

飞不起来的小菜鸟

已于 2022-06-29 21:39:09 修改

阅读量392

点赞数

分类专栏： Vue.js 文章标签： vue.js 学习 javascript

于 2022-06-29 20:33:55 首次发布

本文链接：https://blog.csdn.net/qq_29107721/article/details/125491910

版权

本文详细介绍了Vuex，一个专为Vue.js应用程序开发的状态管理模式。内容涵盖Vuex的基本概念、使用场景、工作原理，以及如何下载和搭建Vuex环境。通过基础小案例展示了组件如何读取和修改Vuex状态，还探讨了getters的使用以及mapState、mapGetters、mapActions、mapMutations四个方法的应用。最后，文章讲解了Vuex的模块化和命名空间配置，以提升代码的可维护性和数据管理的清晰度。

摘要由CSDN通过智能技术生成

文章目录

vuex

vuex

概念

专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信方式，并且适用于任意组件简单通信。

使用场景

多个组件依赖同一状态。
来自不同组件的行为需要变更同一状态。

vuex工作原理

在这里插入图片描述

下载Vuex

# 默认的下载是最高版本的
npm i vuex
	# 或
yarn add vuex
# 下载3版本的vuex
npm i vuex@3
	# 或
yarn add vuex@3

搭建Vuex环境

创建文件src/store/index.js

// 该文件用于创建Veux中最为核心的store

import Vue from 'vue'

// 引入Vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex);

// 准备actions  用于响应组件中的动作
const actions = {
   }
// 准备mutations    用于加工数据
const mutations = {
   }
// 准备state    用于存储数据
const state = {
   }
// 创建store
/* const store = new Vuex.Store({
    actions,
    mutations,
    state,
})
// 导出store
export default store */
// 创建并暴露store
export default new Vuex.Store({
   
    actions,
    mutations,
    state
})

在main.js中创建vm时引入store配置项

// 引入Vue
import Vue from "vue";
// 引入App组件
import App from "./App"
// 引入store
import store from './store'

// 关闭生产提示
Vue.config.productionTip = false
// 创建vm
new Vue({
   
    render: h => h(App),
    store,
    // store: store
    beforeCreate() {
   
        // 安装全局事件总线
        Vue.prototype.$bus = this
    },
}).$mount("#app");

Vuex基础小案例

组件读取Vuex中的数据：[this.]$store.state.内容
组件修改Vuex中的数据：[this.]$store.despath("actions方法名", 数据)或[this.]$store.commit("mitations方法名", 数据)
src/store/index.js

// 该文件用于创建Veux中最为核心的store

import Vue from 'vue'

// 引入Vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex);

// 准备actions  用于响应组件中的动作
const actions = {
   
    /* incremnet(context, value) {
        // console.log("actions中的incremnet被调用了", context, value);
        context.commit("INCREMNET", value)
    },
    decremnet(context, value) {
        // console.log("actions中的decremnet被调用了", context, value);
        context.commit("DECREMNET", value)
    }, */
    incremnetOdd(context, value) {
   
        // console.log("actions中的incremnetOdd被调用了", context, value);
        if (context.state.sum % 2) {
   
            context.commit("INCREMNET", value)
        }
    },
    incremnetWait(context, value) {
   
        // console.log("actions中的incremnetWait被调用了", context, value);
        setTimeout(() => {
   
            context.commit("INCREMNET", value)
        }, 500)
    },
}
// 准备mutations    用于加工数据
const mutations = {
   
    INCREMNET(state, value) {
   
        // console.log("mutations中的INCREMNET被调用了", context, value);
        state.sum += value
    },
    DECREMNET(state, value) {
   
        // console.log("mutations中的DECREMNET被调用了", context, value);
        state.sum -= value
    }
}
// 准备state    用于存储数据
const state = {
   
    sum: 0,  // 当前的求和
}
// 创建store
/* const store = new Vuex.Store({
    actions,
    mutations,
    state,
})


// 导出store
export default store */
// 创建并暴露store
export default new Vuex.Store({
   
    actions,
    mutations,
    state
})

Count.vue

<template>
  <div>
    <h1>当前求和为：{
   {
   $store.state.sum}}</h1>
    <select v-model.number="num">
        <option value

最低0.47元/天解锁文章