Vuex介绍和使用

1. 什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它解决了在大型 Vue.js 应用程序中共享和管理状态的问题，使得状态管理变得更加简单、可预测和可维护。

在 Vue.js 应用中，组件之间的通信可以通过 props 和事件进行，但随着应用的复杂性增加，组件之间的状态共享和状态变更管理变得困难。Vuex 提供了一种集中式的状态管理方案，将所有组件的状态存储在一个单一的地方，称为 “store”。

Vuex 的核心概念包括：

  1. State（状态）: Vuex 使用一个单一的状态树（state tree）来存储应用的所有状态。这个状态树是响应式的，任何组件可以直接访问和监听状态的变化。
  2. Getters（获取器）: Getters 允许组件从 Vuex store 中获取状态，并对其进行计算和过滤。类似于组件中的计算属性，Getters 可以缓存计算结果，避免不必要的重复计算。
  3. Mutations（变更）: Mutations 是修改状态的唯一方式。它们是同步的事务，用于改变状态树中的数据。Mutations 是通过提交 (commit) 来触发，确保状态的变更是可追踪的。
  4. Actions（动作）: Actions 用于处理异步操作和复杂的业务逻辑。它们可以包含多个 Mutations 的提交，用于改变状态。Actions 可以被组件调用，触发异步操作，并提交 Mutations 来改变状态。
  5. Modules（模块）: Modules 允许将 Vuex store 分割成模块，每个模块拥有自己的 state、getters、mutations 和 actions。这使得大型应用程序中的状态管理更加模块化和可扩展。

通过使用 Vuex，开发人员可以更好地组织和管理应用程序的状态。它提供了一个集中式的数据流，让状态的变化变得可预测和可追踪，同时还提供了强大的工具和插件来帮助开发者调试和优化应用程序。

总结起来，Vuex 是一个用于 Vue.js 的状态管理库，通过集中管理和共享状态，简化了大型应用程序的状态管理和组件之间的通信。它的核心概念包括 State、Getters、Mutations、Actions 和 Modules，提供了一种可预测、可维护和可扩展的状态管理方案

2. 安装Vuex

注意版本问题：vuex3 - vue2、vuex4 - vue3

我这里使用的是vue2

npm install vuex@3 --save
  • vuex@3 指定要安装的 Vuex 版本是 3 版本。@3 是一个语法规则，用于指定特定的软件包版本。
  • –save 是一个命令行选项，用于将安装的软件包添加到项目的 package.json 文件的 dependencies 部分。这样做可以记录项目使用的软件包及其版本，以便在其他环境中重新安装时保持一致。

3. 使用Vuex

3.1. 建一个index.js

src目录下建一个store目录，store目录底下建一个index.js

// 初始化一个vuex的实例
import Vuex from 'vuex'
import Vue from 'vue'

// 使用安装
Vue.use(Vuex)

// 初始化
const store = new Vuex.Store({
  // 配置（state|mutations|actions）
})

export default store

3.2. 全局注入Store

即使在组件中不引入store也可以使用vuex

在main.js中注入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  // 把store对象挂载到vue实例对象中，这样就可以在所有的组件中获取store中的数据了,
  store,
  components: { App },
  template: '<App/>'
})

3.3. 创建一个store

const store = new Vuex.Store({
  state: {
    // 存放状态
    user: {
      name: 'curry',
      age: 35
    }
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，异步操作
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
  //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});

主要有5个属性

  1. state – 存放状态
  2. getters – state的计算属性
  3. mutations – 更改状态的逻辑，同步操作
  4. actions – 提交mutation，异步操作
  5. mudules – 将store模块化

3.4. 使用store

<template>
  <div>
    <div class="hello">{{ $store.state.user.name }}</div>
  </div>
</template>
<script>

  export default {
  }
</script>

3.5. 页面展示结果

img

4. state

State 是存储应用程序状态的对象。它是 Vuex store 的核心部分，包含了应用程序中的各种数据。

State 在 Vuex store 中充当单一数据源，即所有组件共享的数据中心。通过集中存储应用程序的状态，可以方便地管理和跟踪状态的变化，并确保状态的一致性。

state简单的说就是存放变量的地方，可以存字符串，对象、数组等

4.1. state使用示例

state中存放一个user对象

// 初始化一个vuex的实例
import Vuex from 'vuex'
import Vue from 'vue'

// 使用安装
Vue.use(Vuex)

// 初始化
const store = new Vuex.Store({
  state: {
    // 存放状态
    user: {
      name: 'curry',
      age: 35
    }
  }
});

export default store

组件中展示store中的值

<template>
  <div>
    <div class="hello">{{ $store.state.user.name }}</div>
  </div>
</template>
<script>

  export default {
  }
</script>

页面显示

img

4.2. mapState使用

mapState 是 Vuex 提供的一个辅助函数，用于简化在组件中访问 Vuex store 中的状态（state）。它可以帮助你将 Vuex store 中的状态映射到组件的计算属性中，使得在组件中使用状态更加方便。

<template>
  <div>
    <div>{{ $store.state.user.name }}</div>
    <div>{{ user.name }}</div>
    <div>{{ userAlias.name }}</div>
    <div>{{ age }}</div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {

    data () {
      return {
        num: 10
      }
    },
    computed: mapState({
      // 箭头函数
      user: state => state.user,
      // 传字符串参数 'user' 等同于 `state => state.user`
      userAlias: 'user',
      // 为了能够使用 `this` 获取局部状态，必须使用常规函数
      age (state) {
        return state.user.age + this.num
      }
    })
  }
</script>

img

4.3. …mapState

在 Vuex 中，…mapState 是一种 JavaScript 扩展语法，用于在组件中快速绑定 Vuex store 中的状态到计算属性。

具体而言，… 表示解构语法（destructuring syntax），而 mapState 是 Vuex 提供的辅助函数。当我们使用 …mapState 时，它会将 mapState 返回的对象展开，并将其中的属性和值分别添加到组件的计算属性中。

这种写法的好处在于它可以简化组件中的代码，避免了重复的代码和显式的属性赋值。通过使用 …mapState，我们可以将 Vuex store 中的状态快速映射到组件的计算属性，使得在组件中访问和使用状态变得更加方便和简洁。

…mapState示例：

<template>
  <div>
    <div>{{ user.name }}</div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {

    data () {
      return {
        num: 10
      }
    },

    computed: {
      // 对象展开运算符：将此对象混入到外部对象中
      ...mapState(["user"])
    }

  }
</script>

img

在上面的示例中，我们使用 …mapState 将 Vuex store 中的 user 状态映射到了组件的计算属性。这样在组件中我们可以直接使用 user,而不需要手动访问 this.$store.state.user

请注意，…mapState 仅仅是一种简写形式

你也可以选择使用完整的对象语法来手动映射状态到计算属性。

例如：

<template>
  <div>
    <div>{{ user.name }}</div>
    <div>{{ age }}</div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {

    data () {
      return {
        num: 10
      }
    },

    computed: {
      // 对象展开运算符：将此对象混入到外部对象中
      ...mapState({
        user: state => state.user,
        age: state => state.user.age
      })
    }

  }
</script>

img

5. Getters

Getters 是用于从 Vuex store 中获取派生状态的函数。它们类似于组件中的计算属性，但是可以在整个应用程序中共享和重用。

通过定义 Getters，可以对存储在 Vuex store 中的状态进行一些计算、筛选或转换，以生成新的派生状态。Getters 可以访问 store 的 state，并且可以接收其他 getters 作为参数。它们可以避免在多个组件中重复编写相同的计算逻辑。

5.1. getters使用示例

// // 初始化一个vuex的实例
import Vuex from 'vuex'
import Vue from 'vue'

// 使用安装
Vue.use(Vuex)

// 初始化
const store = new Vuex.Store({
  state: {
    // 存放状态
    user: {
      name: 'curry',
      age: 35
    }
  },
  getters: {
    // 获取全名
    fullName: state => {
      return "史蒂芬" + state.user.name
    },

    userInfo: state => {
      return state.user.name + "今年" + state.user.age + "岁"
    }
  }


});
export default store

<template>
  <div>
    <div>全名:{{ $store.getters.fullName }}</div>
    <div>今年多大了:{{ $store.getters.userInfo }}</div>
  </div>
</template>

<script>

export default {

}

</script>

img

5.2. mapGetters

与mapStore用法一样的

<template>
  <div>
    <div>全名:{{ fullName }}</div>
    <div>今年多大了:{{ userInfo }}</div>
  </div>
</template>

<script>

import {mapGetters} from 'vuex';
export default {
  computed: {
    ...mapGetters(['fullName', 'userInfo'])

  }
}

</script>

img

6. mutations

Mutations 是用于修改 Vuex store 中状态的方法。它们是 Vuex 中的同步操作，负责修改 store 的状态，并且每个 mutation 都有一个字符串类型的事件名和一个回调函数。

6.1. mutations使用示例

// // 初始化一个vuex的实例
import Vuex from 'vuex'
import Vue from 'vue'

// 使用安装
Vue.use(Vuex)

// 初始化
const store = new Vuex.Store({
  state: {
    // 存放状态
    user: {
      name: 'curry',
      age: 35
    }
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
    updateName(state) {
      state.user.name = 'James'
    },
    updateAge(state) {
      state.user.age = 39
    },
    resetUser(state) {
      state.user = {
        name: 'curry',
        age: 35
      }
    }
  },
});
export default store

在组件中使用这些 Mutations，你需要使用 commit 方法来触发它们

<template>
  <div>
    <div>姓名:{{ $store.state.user.name }}</div>
    <div>年龄:{{ $store.state.user.age }}</div>
    <button @click="updateName">修改姓名</button>
    <button @click="updateAge">修改年龄</button>
    <button @click="resetUser">重置用户</button>
  </div>
</template>

<script>

  export default {
    methods: {
      updateName() {
        this.$store.commit('updateName')
      },
      updateAge() {
        this.$store.commit('updateAge')
      },
      resetUser() {
        this.$store.commit('resetUser')
      }
    }
  }

</script>

img

7. actions

Actions 是用于处理异步操作和触发 Mutations 的方法。Actions 允许在 Vuex store 中执行异步操作，如发起网络请求、访问 API 或执行其他异步任务。

Actions 类似于 Mutations，它们也有一个字符串类型的事件名和一个回调函数。

Action 类似于 mutation，不同在于：

  • Action 提交的是 mutation，而不是直接变更状态，而 Mutation是直接改变状态；
  • Action 可以包含任意异步操作，Mutation 包含的必须是同步操作。

7.1. actions使用示例

// // 初始化一个vuex的实例
import Vuex from 'vuex'
import Vue from 'vue'

// 使用安装
Vue.use(Vuex)

// 初始化
const store = new Vuex.Store({
  state: {
    // 存放状态
    user: {
      name: 'curry',
      age: 35
    }
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
    updateName(state) {
      state.user.name = 'James'
      console.log(state.user.name)
    },
    updateAge(state) {
      state.user.age = 39
    },
    resetUser(state) {
      state.user = {
        name: 'curry',
        age: 35
      }
    }
  },

  actions: {
    updateName(context) {
        context.commit('updateName')
    },
    updateNameAsync(context) {
      setTimeout(() => {
        context.commit('updateName')
      }, 2000)
    }
  }

});
export default store

该 Action 包含一个异步的updateNameAsync方法，点击后2秒钟返回结果

<template>
  <div>
    <div>姓名:{{ $store.state.user.name }}</div>
    <div>年龄:{{ $store.state.user.age }}</div>
    <button @click="updateName">修改姓名</button>
    <button @click="updateNameAsync">异步修改姓名</button>
  </div>
</template>

<script>

  export default {
    methods: {
      updateName() {
        // 触发action(必须调用dispatch方法)
        this.$store.dispatch('updateName')
      },
      updateNameAsync() {
        // 触发action(必须调用dispatch方法)
        this.$store.dispatch('updateNameAsync')
      }
    }
  }

</script>

img

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/379578.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

从github上拉取项目到pycharm中

从github上拉取项目到pycharm中

有两种方法&#xff0c;方法一较为简单&#xff0c;方法二用到了git bash&#xff0c;推荐方法一 目录 有两种方法&#xff0c;方法一较为简单&#xff0c;方法二用到了git bash&#xff0c;推荐方法一方法一&#xff1a;方法二&#xff1a; 方法一&#xff1a; 在github上复制…
阅读更多...
SpringCloud-微服务项目架构

SpringCloud-微服务项目架构

在当今软件开发领域&#xff0c;微服务架构正成为构建灵活、可伸缩、独立部署的应用的首选&#xff0c;微服务架构作为一种灵活而强大的设计模式&#xff0c;通过将系统拆分为独立的、自治的服务&#xff0c;使得应用更容易维护、扩展和升级。本文将探讨微服务项目架构的关键特…
阅读更多...
WordPress函数wptexturize的介绍及用法示例，字符串替换为HTML实体

WordPress函数wptexturize的介绍及用法示例，字符串替换为HTML实体

在查看WordPress你好多莉插件时发现代码中使用了wptexturize()函数用来随机输出一句歌词&#xff0c;下面boke112百科就跟大家一起来学习一下WordPress函数wptexturize的介绍及用法示例。 WordPress函数wptexturize介绍 wptexturize( string $text, bool $reset false ): st…
阅读更多...
质数基础筛法

质数基础筛法

文章目录 埃氏筛线性筛 埃氏筛 埃氏筛是一种筛素数的方法&#xff0c;埃氏筛的思想很重要&#xff0c;主要是时间复杂度 朴素的埃氏筛的时间复杂度是 O ( n l o g n ) O(nlogn) O(nlogn) 这个复杂度是调和级数 vector<int>p; int vis[N];void solve() {rep(i,2,n){if(…
阅读更多...
爪哇部落算法组2024新生赛热身赛题解

爪哇部落算法组2024新生赛热身赛题解

第一题&#xff08;签到&#xff09;&#xff1a; 1、题意&#xff1a; 2、题解: 我们观察到happynewyear的长度是12个字符&#xff0c;我们直接从前往后遍历0到n - 12的位置&#xff08;这里索引从0开始&#xff09;&#xff0c;使用C的substr()函数找到以i开头的长度为12的字…
阅读更多...
形态学算法应用之连通分量提取的python实现——图像处理

形态学算法应用之连通分量提取的python实现——图像处理

原理 连通分量提取是图像处理和计算机视觉中的一项基本任务&#xff0c;旨在识别图像中所有连通区域&#xff0c;并将它们作为独立对象处理。在二值图像中&#xff0c;连通分量通常指的是所有连接在一起的前景像素集合。这里的“连接”可以根据四连通或八连通的邻接关系来定义…
阅读更多...
基于华为云欧拉操作系统(HCE OS)容器化部署传统应用(Redis+Postgresql+Git+SpringBoot+Nginx)

基于华为云欧拉操作系统(HCE OS)容器化部署传统应用(Redis+Postgresql+Git+SpringBoot+Nginx)

写在前面 博文内容为 华为云欧拉操作系统入门级开发者认证(HCCDA – Huawei Cloud EulerOS)实验笔记整理认证地址&#xff1a;https://edu.huaweicloud.com/certificationindex/developer/9bf91efb086a448ab4331a2f53a4d3a1博文内容涉及一个传统 Springboot 应用HCE部署&#x…
阅读更多...
云安全的基本概念（基本目标与指导方针）

云安全的基本概念（基本目标与指导方针）

目录 一、云安全概念概述 1.1 概述 二、云安全的基本目标 2.1 安全策略开发模型 2.1.1 信息安全三元组 2.1.1.1 保密性(Confidentiality) 2.1.1.2 完整性(Integrity) 2.1.1.3 可用性(Availability) 2.1.2 信息安全三元组的局限性 2.2 其他信息安全属性 2.2.1 真实性 …
阅读更多...
《山雨欲来-知道创宇 2023 年度 APT 威胁分析总结报告》

《山雨欲来-知道创宇 2023 年度 APT 威胁分析总结报告》

下载链接: https://pan.baidu.com/s/1eaIOyTk12d9mcuqDGzMYYQ?pwdzdcy 提取码: zdcy
阅读更多...
HttpClient | 支持 HTTP 协议的客户端编程工具包

HttpClient | 支持 HTTP 协议的客户端编程工具包

目录 1、简介 2、应用场景 3、导入 4、API 5、示例 5.1、GET请求 5.2、POST请求 &#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;专注于Java领域学习&#xff0c;擅长web应用开发、数据结构和算法&#xff0c;初…
阅读更多...
[晓理紫]CCF系列会议截稿时间订阅

[晓理紫]CCF系列会议截稿时间订阅

CCF系列会议截稿时间订阅 关注{晓理紫|小李子}&#xff0c;每日更新最新CCF系列会议信息&#xff0c;如感兴趣&#xff0c;请转发给有需要的同学&#xff0c;谢谢支持&#xff01;&#xff01; 如果你感觉对你有所帮助&#xff0c;请关注我&#xff0c;每日准时为你推送最新CCF…
阅读更多...
MATLAB知识点：逻辑运算函数

MATLAB知识点：逻辑运算函数

​讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 节选自第3章 3.4.4 逻辑运算 3.4.4.1 逻辑运算函数 在上…
阅读更多...
Java基础常见面试题总结-集合（一）

Java基础常见面试题总结-集合（一）

常见的集合有哪些&#xff1f; Java集合类主要由两个接口Collection和Map派生出来的&#xff0c;Collection有三个子接口&#xff1a;List、Set、Queue。 Java集合框架图如下&#xff1a; List代表了有序可重复集合&#xff0c;可直接根据元素的索引来访问&#xff1b;Set代表…
阅读更多...
寒假作业-day7

寒假作业-day7

1>现有文件test.c\test1.c\main.c , 请编写Makefile. 代码&#xff1a; CCgcc EXEstr OBJS$(patsubst %.c,%.o,$(wildcard *.c)) CFLAGS-c -oall:$(EXE)$(EXE):$(OBJS)$(CC) $^ -o $%.o:%.c$(CC) $(CFLAGS) $ $^head.o:head.hclean:rm $(OBJS) $(EXE) 2>C编程实现&…
阅读更多...
Uniapp（uni-app）学习与快速上手教程

Uniapp（uni-app）学习与快速上手教程

Uniapp&#xff08;uni-app&#xff09;学习与快速上手教程 1. 简介 Uniapp是一个跨平台的前端框架&#xff0c;允许您使用Vue.js语法开发小程序、H5、安卓和iOS应用。下面是快速上手的步骤。 2. 创建项目 2.1 可视化界面创建 1、打开 HBuilderX&#xff0c;这是一款专为uni…
阅读更多...
docker 基于容器创建本地web容器化镜像

docker 基于容器创建本地web容器化镜像

一、docker 基于容器创建本地web容器化镜像 1、启动指定buysbox 镜像 docker run --name b1 -it busybox:latest 2、创建目录&#xff0c;并创建html mkdir -p /data/html vi index.html 内容自定义例如&#xff1a;<h1>welcome to busybox<h1> 3、新增窗口&am…
阅读更多...
基于麻雀优化算法优化XGBoost参数的优化控制策略

基于麻雀优化算法优化XGBoost参数的优化控制策略

目录 一、背景 二、算法流程图 三、附录 一、背景 为提高极端梯度提升&#xff08;Extreme Gradient Boosting, XGBoost&#xff09;集成算法在时间预测、信贷风险预测、工件参数预测、故障诊断预测等方面中的准确性&#xff0c;研究者提出了一种改进的麻雀算法&#xff08;…
阅读更多...
leetcode:62.不同路径

leetcode:62.不同路径

动态规划 注意&#xff1a;用深搜或者广搜会超时 dp含义dp[i,j]&#xff1a;从&#xff08;0&#xff0c;0&#xff09;到&#xff08;i&#xff0c;j&#xff09;的路径个数 递推公式&#xff1a;dp[i][j] dp[i-1][j] dp[i][j-1] 初始化&#xff1a;for(i 0,i<m,i) …
阅读更多...
python_蓝桥杯刷题记录_笔记_全AC代码_入门4

python_蓝桥杯刷题记录_笔记_全AC代码_入门4

题单目录 1.P1914 小书童——凯撒密码 2.P1028 [NOIP2001 普及组] 数的计算 3.P1036 [NOIP2002 普及组] 选数 4.P1149 [NOIP2008 提高组] 火柴棒等式 5.P1217 [USACO1.5] 回文质数 Prime Palindromes 6.P1478 陶陶摘苹果&#xff08;升级版&#xff09; 7.P1618 三连击&…
阅读更多...
移动端设置position: fixed；固定定位，底部出现一条缝隙，不知原因，欢迎探讨！！！

移动端设置position: fixed；固定定位，底部出现一条缝隙，不知原因，欢迎探讨！！！

1、问题 在父盒子中有一个子盒子&#xff0c;父盒子加了固定定位&#xff0c;需要子盒子上下都有要边距&#xff0c;用margin或者padding挤开时&#xff0c;会出现缝隙是子盒子背景颜色的。 测试过了&#xff0c;有些手机型号有&#xff0c;有些没有&#xff0c;微信小程序同移…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站