VueX状态管理

源码 · 2024-9-14 20:25:10

✍目次总览：
一、VueX概念

1. VueX的概念
Vuex 是一个专为 Vue.js 应用步调开发的状态管理模式。
它接纳会集式存储管理应用的全部组件的状态，并以相应的规则包管状态以一种可猜测的方式发生变革。

Vuex 的状态存储是相应式的。当 Vue 组件从 store 中读取状态的时间，若 store 中的状态发生变革，那么相应的组件也会相应地得到高效更新。
VueX里面全部数据都可以全局使用。

2. 状态管理的概念
可以简单的将其看成把必要多个组件共享的变量全部存储在一个对象里面。
将这个对象放在顶层的Vue实例中，让其他组件可以使用。
二、单界面的状态管理

在单文件组件中举行状态管理：
图片中的三种东西如下：

State：状态
View：视图层，可以针对 State 的变革，体现差异的信息
Actions：这里的Actions紧张是用户的各种使用：点击、输入等等，会导致状态的变革

//单文件组件内部代码<template> <div> <div>当前计数:{{counter}}</div> <button @click="counter+=1">+1</button> <button @click="counter-=1">-1</button> </div></template><script>export default { name: "HelloWorld", data() { return { counter: 0 } }}</script><style scoped></style>上述案例中，必要管理的状态：个数counter。

counter必要某种方式被纪录下来，也就是我们的State。
counter现在的值必要被体现在界面中，也就是我们的View部门。
界面发生某些使用时（我们这里是用户的点击，也可以是用户的input），必要去更新状态，也就是我们的Actions

三、多界面状态管理

3.1 单个文件的组件状态管理清晰明白，那多个单文件组件的状态管理呢？（出现的标题）

多个组件都依靠同一个状态(一个状态改了，多个组件界面必要举行更新)
差异界面的组件Actions 都想修改同一个状态(Home.vue 必要修改，Profile.vue 也必要修改这个状态)

3.2 VueX背后的根本头脑：（办理方法）
1. 将多个组件共享的状态抽取出来，交给我们的大管家VueX，同一举行管理。
2. 每个组件视图，按照VueX的规则定，举行访问和修改等使用。
四、VueX 根本用法

1. 安装VueX

方式1：通过下令行npm举行安装。

VueX状态管理

所属分类: 问答交流

新帖推荐: 30日

推荐作品