首页 > 其他分享 >Vue 中的 Vuex:全面解析与使用教程

Vue 中的 Vuex:全面解析与使用教程

时间:2024-09-06 09:20:37浏览次数:12  
标签:count 状态 教程 Vue state 组件 Vuex store

什么是 Vuex?

Vuex 是 Vue.js 官方提供的状态管理模式,专为 Vue.js 应用设计。它通过集中式存储管理应用中所有的组件状态,允许组件之间更方便地共享数据,并提供了一套规则来确保状态以可预测的方式发生变化。Vuex 对大型应用尤其有用,因为它将组件中的状态提取到外部,并通过全局状态管理器进行集中管理。

Vuex 提供了响应式的数据存储,与 Vue 组件深度集成,这意味着当状态发生变化时,所有依赖该状态的组件会自动更新。

为什么需要 Vuex?

在小型应用中,组件之间的状态可以通过父子组件通信或事件总线来管理。然而,当应用逐渐变大,组件间的状态变得复杂时,这种方法就显得笨拙且难以维护。这时,我们可以使用 Vuex 作为统一的状态管理工具,以确保整个应用状态的一致性和可预测性。

Vuex 的核心概念

Vuex 由以下几个核心部分组成:

  • State:状态,存储应用的全局数据。

  • Getters:计算属性,用于派生状态数据。

  • Mutations:同步操作,用于改变状态。

  • Actions:异步操作,用于处理业务逻辑,并通过提交 mutations 改变状态。

  • Modules:将状态和逻辑划分成多个模块,便于管理。

Vuex 的安装

首先,需要安装 vuex

npm install vuex --save
// src/store/index.js
import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

main.js 中注册 Vuex

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);

app.use(store);
app.mount('#app');

使用 Vuex 管理状态

1. State - 存储全局状态

State 是存储全局状态数据的地方,类似于组件中的 data。在组件中,我们可以通过 this.$store.state 来访问 Vuex 中的状态。

const store = createStore({
  state: {
    count: 0
  }
});

在组件中使用 state

<template>
  <div>
    <p>当前计数:{{ count }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};
</script>

2. Mutations - 修改状态

Mutations 是用于修改 state 的方法,通常是同步的。我们通过 commit 函数来调用 mutations

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

在组件中调用 mutations 来修改状态:

<template>
  <div>
    <p>当前计数:{{ count }}</p>
    <button @click="increment">增加计数</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
};
</script>

3. Getters - 计算属性

Getters 类似于组件中的 computed,用于从 state 中派生数据。

const store = createStore({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

在组件中使用 getters

<template>
  <div>
    <p>计数的两倍:{{ doubleCount }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  }
};
</script>

4. Actions - 异步操作

Actions 是用于处理异步操作的,通常用来提交 mutations。在组件中调用 actions 时,我们使用 dispatch 函数。

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

在组件中调用 actions

<template>
  <div>
    <p>当前计数:{{ count }}</p>
    <button @click="incrementAsync">异步增加计数</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
};
</script>

5. Modules - 模块化管理状态

当应用变得复杂时,可以将 store 划分为多个 module。每个模块有自己的 statemutationsactionsgetters,并且模块可以嵌套。

const moduleA = {
  state: () => ({ count: 0 }),
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
};

const store = createStore({
  modules: {
    a: moduleA
  }
});

在组件中访问模块的 stategetters

<template>
  <div>
    <p>模块A的计数:{{ count }}</p>
    <p>计数的两倍:{{ doubleCount }}</p>
    <button @click="increment">增加计数</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.a.count;
    },
    doubleCount() {
      return this.$store.getters['a/doubleCount'];
    }
  },
  methods: {
    increment() {
      this.$store.commit('a/increment');
    }
  }
};
</script>

Vuex 开发者工具

Vuex 与 Vue Devtools 紧密集成,可以实时查看状态的变化、mutationsactions 的触发过程。这使得调试 Vuex 应用变得非常方便。

总结

Vuex 提供了一个强大的状态管理模式,尤其适合大型应用的开发。通过 state 来集中存储数据,通过 mutationsactions 来改变状态,通过 getters 来派生状态数据,并通过模块化管理使得应用的逻辑清晰易维护。在现代 Vue 应用中,Vuex 是一种非常有用的工具,能够帮助开发者轻松地管理复杂的状态。

标签:count,状态,教程,Vue,state,组件,Vuex,store
From: https://blog.csdn.net/qq_67572731/article/details/141950764

相关文章

  • 《黑神话:悟空》 风灵月影修改器使用指南:详尽教程,助你轻松驾驭游戏
    《黑神话:悟空》是一款深受玩家喜爱的动作冒险游戏,其精美的画面和引人入胜的故事剧情吸引了众多粉丝。对于那些希望通过修改器来进一步增强游戏体验的玩家来说,“风灵月影”修改器是一个不错的选择。下面是如何使用这款修改器的详细步骤。获取修改器首先,你需要从一个可信赖的......
  • Vue+Echert集成实现数据可视化
    ApacheEChartsecherts官方文档 echerts依赖引入方式方式一:1.安装echarts依赖//二选一npminstallecharts--savenpminstallecharts-S//二选一npminstall-gcnpm--registry=https://registry.npm.taobao.orgcnpminstallecharts-S2.全局注入......
  • 关于Apache如何多个端口发布多个网站(新手教程)
    一.背景:1.基于系统:Windowsserver20222.基于版本:Apache2.4.57php8.2.23mysql8.0.16二.检查:1.Apache的安装:确认Apache安装成功;如果没有:前往Apache官网;详细步骤会后续新章补上;2.PHP的安装:确认PHP安装成功;如果没有:前往PHP官网;详细步骤会后续新章补上;3.MYSQL的安......
  • Vue 实现图片下拉选择控件
    element-ui的组件库中没有图片下拉选择组件,基于el-select组件做的改动并不能完全满足需求,因此决定重写一个。从头到尾做下来收获很多,我决定把实现过程中遇到的问题记录一下。效果图在线试用地址设计要点接下来将上面代码中的关键部分拆分介绍1.回显选中的图片和lab......
  • vue3 tsx 测试几种使用方式
    总论tsxsetup里面定义了returndom元素,则optionsapi的render函数不生效options的render函数生效前提是setup里面不能returndomoptions的render里面可以直接使用this访问setup里面的数据或者ctxtsx一般最好用defineComponent包裹,这样响应式才能生效tsxdom语法使用{}......
  • 【Python篇】PyQt5 超详细教程——由入门到精通(中篇一)
    文章目录PyQt5入门级超详细教程前言第4部分:事件处理与信号槽机制4.1什么是信号与槽?4.2信号与槽的基本用法4.3信号与槽的基础示例代码详解:4.4处理不同的信号代码详解:4.5自定义信号与槽代码详解:4.6信号槽的高级用法4.7总结第5部分:文件对话框与文件处理5.1什么......
  • php基于Vue的助农生鲜销售系统的设计与实现(源码+文档+调试+讲解)
    收藏关注不迷路!!......
  • 24年9月最新微软copilot国内Windows11强制开启使用教程方法
    几个月前就听说了微软的copilot加PC。今天新电脑到货。把系统都更新完以后。就研究了一下怎么开通这个copilot。正常情况下,目前国内的电脑是没有这个功能的。但只是因为地区不支持我们只需要通过一些简单的设置就可以让它显示出来嗯,最好是要Windows11的电脑系统其他的没有测试......
  • springboot+vue+mybatis计算机毕业设计房屋租赁管理系统+PPT+论文+讲解+售后
    随着社会的不断进步与发展,人们经济水平也不断的提高,于是对各行各业需求也越来越高。特别是从2019年新型冠状病毒爆发以来,利用计算机网络来处理各行业事务这一概念更深入人心,由于工作繁忙以及疫情的原因,房屋租赁也是比较难实施的。如果开发一款房屋租赁管理系统,可以让用户在最......
  • 【生日视频制作】毛笔书法字展示写字AE模板修改文字软件生成器教程特效素材【AE模板】
    生日视频制作教程毛笔书法字展示写字AE模板修改文字特效广软件告生成神器素材祝福玩法AE模板替换工程怎么如何做的【生日视频制作】毛笔书法字展示写字AE模板修改文字软件生成器教程特效素材【AE模板】生日视频制作步骤:安装AE软件下载AE模板把AE模板导入AE软件修......