vuex的学习

最新推荐文章于 2025-06-03 22:18:34 发布

呦呦鹿鸣~@

最新推荐文章于 2025-06-03 22:18:34 发布

阅读量600

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/qq_53841687/article/details/126392131

一、vuex

1.定义

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

原理图：

State | VuexVue.js 的中心化状态管理方案https://vuex.vuejs.org/zh/guide/state.html

vuex多应用于多个组件应用与同一个状态，多个组件变更同一状态。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

什么是“状态管理模式”？

这个状态自管理应用包含以下几个部分：

状态，驱动应用的数据源；

视图，以声明方式将状态映射到视图；

操作，响应在视图上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状态。

来自不同视图的行为需要变更同一状态。

2.安装

npm i vuex@3 注释：@3是版本号，vue2用vuex@3版本,vue3用4版本

二、store创建

1.定义

概念：每一个Vuex应用的核心就是Store（仓库），我们可以说Store是一个容器，它包含着你的应用中大部分的状态 (state)。但Store里面的状态与单纯的全局变量是不一样的，无法直接改变Store中的状态。想要改变状态需通过mutation去修改。

Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

2.结构

创建文件夹store与src根目录下，建立index.js。需包含actions，mutations，state结构如下：

import Vue from 'vue' // 引入vue

import Vuex from 'vuex' // 引入vuex

Vue.use(Vuex) // 应用vue插件

// actions响应组件中的动作

const actions = { }

// mutations操作数据state

const mutations = { }

// 准备state存储数据

const state = {

//状态对象

}

//想要对状态有要进一步的加工时可以用到

//getters 从 store 中的 state 中派生出一些状态

const getters={ <