Vuex介绍和使用

news2025/1/20 11:02:02

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.coloradmin.cn/o/1441615.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

微信小程序（三十四）搜索框-带历史记录

微信小程序（三十四）搜索框-带历史记录

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.搜索框基本模板 2.历史记录基本模板 3.细节处理 源码&#xff1a; index.wxml <!-- 1.点击搜索按钮a.非空判断b.历史记录&#xff08;去重&#xff09;c.清空搜索框d.去除前后多余空格2.删除搜索 3.无搜索…
阅读更多...
【制作100个unity游戏之24】unity制作一个3D动物AI生态系统游戏3（附项目源码）

【制作100个unity游戏之24】unity制作一个3D动物AI生态系统游戏3（附项目源码）

最终效果 文章目录 最终效果系列目录前言随着地面法线旋转在地形上随机生成动物不同部位颜色不同最终效果源码完结系列目录 前言 欢迎来到【制作100个Unity游戏】系列！本系列将引导您一步步学习如何使用Unity开发各种类型的游戏。在这第24篇中，我们将探索如何用unity制作一…
阅读更多...
肯尼斯·里科《C和指针》第13章 高级指针话题（3）命令行参数

肯尼斯·里科《C和指针》第13章 高级指针话题（3）命令行参数

处理命令行参数是指向指针的指针的另一个用武之地。有些操作系统&#xff0c;包括UNIX和MS-DOS&#xff0c;让用户在命令行中编写参数来启动一个程序的执行。这些参数被传递给程序&#xff0c;程序按照它认为合适的任何方式对它们进行处理。 13.4.1 传递命令行参数 这些参数如何…
阅读更多...
BestEdrOfTheMarket：一个针对AVEDR绕过的训练学习环境

BestEdrOfTheMarket：一个针对AVEDR绕过的训练学习环境

关于BestEdrOfTheMarket BestEdrOfTheMarket是一个针对AV/EDR绕过的训练学习环境&#xff0c;广大研究人员和信息安全爱好者可以使用该项目研究和学习跟AV和EDR绕过相关的技术知识。 支持绕过的防御技术 1、多层API钩子&#xff1b; 2、SSH钩子&#xff1b; 3、IAT钩子&#x…
阅读更多...
比较6*6范围内7个点182个结构的顺序

比较6*6范围内7个点182个结构的顺序

( A, B )---6*30*2---( 1, 0 )( 0, 1 ) 让网络的输入有6个节点&#xff0c;训练集AB各由6张二值化的图片组成&#xff0c;让A中有7个点&#xff0c;让B全是0&#xff0c;收敛误差7e-4&#xff0c;收敛199次&#xff0c;统计迭代次数平均值并排序。 得到顺序为 用6个点的结构标…
阅读更多...
【开源】JAVA+Vue.js实现在线课程教学系统

【开源】JAVA+Vue.js实现在线课程教学系统

目录 一、摘要1.1 系统介绍1.2 项目录屏 二、研究内容2.1 课程类型管理模块2.2 课程管理模块2.3 课时管理模块2.4 课程交互模块2.5 系统基础模块 三、系统设计3.1 用例设计3.2 数据库设计 四、系统展示4.1 管理后台4.2 用户网页 五、样例代码5.1 新增课程类型5.2 网站登录5.3 课…
阅读更多...
初识NodeJS

初识NodeJS

本文主要基于极客时间《Nodejs开发实战》课程。 本篇&#xff08;一&#xff09;为课程的第二篇——技术预研篇。 什么是Nodejs? 来源官网&#xff1a; Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型&#x…
阅读更多...
备战蓝桥杯---动态规划（基础1）

备战蓝桥杯---动态规划（基础1）

先看几道比较简单的题&#xff1a; 直接f[i][j]f[i-1][j]f[i][j-1]即可&#xff08;注意有马的地方赋值为0&#xff09; 下面是递推循环方式实现的AC代码&#xff1a; #include<bits/stdc.h> using namespace std; #define int long long int a[30][30]; int n,m,x,y; …
阅读更多...
HTTP2:netty http2 StreamChannel多流实现与Http2StreamFrame解码器的源码分析

HTTP2:netty http2 StreamChannel多流实现与Http2StreamFrame解码器的源码分析

netty http2 server侧的核心逻辑个人认为&#xff0c;主要在编解码处理器和Stream Transform Channel这块&#xff0c;分别处理Http2 消息帧的编解码&#xff0c;以及连接的多流处理机制。对应用的处理类分别&#xff1a; ChannelHandlerDescio.netty.handler.codec.http2.Htt…
阅读更多...
vue 引入 百度地图API 和 路书

vue 引入 百度地图API 和 路书

公司项目中&#xff0c;偶尔都会涉及到地图的使用&#xff0c;这里以百度地图为例&#xff0c;我们梳理一下引用流程及注意点 账号和获取密钥 百度地图示例 百度地图 类参考 1、账号和获取密钥 // api.map.baidu.com/api?typewebgl&v3.0&ak您的密钥<script type…
阅读更多...
宋小黑原创高清壁纸分享之蓝白云海

宋小黑原创高清壁纸分享之蓝白云海

大家好&#xff0c;我是小黑&#xff0c;最近迷上了制作壁纸&#xff0c;哈哈&#xff0c;给大家分享一波&#xff0c;小黑做的美图~ 本期给大家分享的是&#xff0c;小黑原创的蓝白云海主题系统壁纸~ 厌倦了一成不变的壁纸吗&#xff1f; 感到学习负担过重吗&#xff1f; …
阅读更多...
肯尼斯·里科《C和指针》第13章 高级指针话题（1）进一步探讨指向指针的指针变量的高级声明

肯尼斯·里科《C和指针》第13章 高级指针话题（1）进一步探讨指向指针的指针变量的高级声明

13.1 进一步探讨指向指针的指针 上一章使用了指向指针的指针&#xff0c;用于简化向单链表插入新值的函数。另外还存在许多领域&#xff0c;指向指针的指针可以在其中发挥重要的作用。这里有一个通用的例子&#xff1a; 这些声明在内存中创建了下列变量。如果它们是自动变量&am…
阅读更多...
6.0 Zookeeper session 基本原理详解教程

6.0 Zookeeper session 基本原理详解教程

客户端与服务端之间的连接是基于 TCP 长连接&#xff0c;client 端连接 server 端默认的 2181 端口&#xff0c;也就 是 session 会话。 从第一次连接建立开始&#xff0c;客户端开始会话的生命周期&#xff0c;客户端向服务端的ping包请求&#xff0c;每个会话都可以设置一个…
阅读更多...
python列表推导式（List Comprehension）

python列表推导式（List Comprehension）

目录 1. 介绍&#xff1a;2. 示例3. 过滤功能4. 多重循环小结&#xff1a; 1. 介绍&#xff1a; 列表推导式是 Python 中一种简洁的语法形式&#xff0c;用于从一个可迭代对象中生成新的列表。它的语法形式为 [expression for item in iterable]&#xff0c;其中expression是一…
阅读更多...
【Larry】英语学习笔记语法篇——从句=连词+简单句

【Larry】英语学习笔记语法篇——从句=连词+简单句

目录 三、从句连词简单句 1、必须有连词 主从结构 疑问词的词性 2、名词性从句 同位语从句 形式主语 形式宾语 that的省略 3、形容词性从句&#xff08;上&#xff09; 关系代词 关系词的作用 介词前置问题 4、形容词性从句&#xff08;中&#xff09; 定语关系…
阅读更多...
（十四）springboot实战——spring securtity安全框架原理之启动流程

（十四）springboot实战——spring securtity安全框架原理之启动流程

前言 本节内容主要介绍spring securtity的初始化启动流程&#xff0c;spring security是通过EnableWebSecurity注解来启用的&#xff0c;在EnableWebSecurity注解中主要引入了WebSecurityConfiguration、SpringWebMvcImportSelector、OAuth2ImportSelector、HttpSecurityConfi…
阅读更多...
光耦固态继电器：2024年发展之路

光耦固态继电器：2024年发展之路

随着科技的迅猛发展&#xff0c;光耦固态继电器在2024年面临着独特的机遇与挑战。本文将深入分析光耦固态继电器行业的现状&#xff0c;探讨其在技术创新、市场需求等方面的机遇和挑战。 光耦固态继电器技术创新的机遇&#xff1a; 光耦固态继电器作为电气控制领域的关键元件&…
阅读更多...
leetcode（哈希表）49.字母异位词分组（C++详细解释）DAY5

leetcode（哈希表）49.字母异位词分组（C++详细解释）DAY5

文章目录 1.题目示例提示 2.解答思路3.实现代码结果 4.总结 1.题目 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 示例 1: 输入: strs [“eat”, “tea”…
阅读更多...
请手写几种js排序算法

请手写几种js排序算法

什么是排序算法 冒泡排序选择排序插入排序快速排序归并排序&#xff08;Merge Sort&#xff09; 思想实现测试分析动画 快速排序 &#xff08;Quick Sort&#xff09; 思想实现测试分析动画 思考&#xff1a;快排和归并用的都是分治思想&#xff0c;递推公式和递归代码也非常相…
阅读更多...
RCE（命令执行）知识点总结最详细

RCE（命令执行）知识点总结最详细

description: 这里是CTF做题时常见的会遇见的RCE的漏洞知识点总结。 如果你觉得写得好并且想看更多web知识的话可以去gitbook.22kaka.fun去看&#xff0c;上面是我写的一本关于web学习的一个gitbook&#xff0c;当然如果你能去我的github为我的这个项目点亮星星我会感激不尽htt…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023