Vuex介绍

一、Vuex 概述

目标：明确Vuex是什么，应用场景以及优势

1.是什么

Vuex 是一个 Vue 的 状态管理工具，状态就是数据。

大白话：Vuex 是一个插件，可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如：购物车数据 个人信息

2.使用场景

  • 某个状态 在 很多个组件 来使用 (个人信息)

  • 多个组件 共同维护 一份数据 (购物车)

在这里插入图片描述

3.优势

  • 共同维护一份数据，数据集中化管理
  • 响应式变化
  • 操作简洁 (vuex提供了一些辅助函数)

在这里插入图片描述

4.注意：

官方原文：

  • 不是所有的场景都适用于vuex，只有在必要的时候才使用vuex
  • 使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度 （数据的操作更便捷，数据的流动更清晰）

Vuex就像《近视眼镜》, 你自然会知道什么时候需要用它~

二、需求: 多组件共享数据

目标：基于脚手架创建项目，构建 vuex 多组件数据共享环境

在这里插入图片描述

效果是三个组件共享一份数据:

  • 任意一个组件都可以修改数据
  • 三个组件的数据是同步的

1.创建项目

vue create vuex-demo

2.创建三个组件, 目录如下

|-components
|--Son1.vue
|--Son2.vue
|-App.vue

3.源代码如下

App.vue在入口组件中引入 Son1 和 Son2 这两个子组件

<template>
  <div id="app">
    <h1>根组件</h1>
    <input type="text">
    <Son1></Son1>
    <hr>
    <Son2></Son2>
  </div>
</template>

<script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'

export default {
  name: 'app',
  data: function () {
    return {

    }
  },
  components: {
    Son1,
    Son2
  }
}
</script>

<style>
#app {
  width: 600px;
  margin: 20px auto;
  border: 3px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

Son1.vue

<template>
  <div class="box">
    <h2>Son1 子组件</h2>
    从vuex中获取的值: <label></label>
    <br>
    <button>值 + 1</button>
  </div>
</template>

<script>
export default {
  name: 'Son1Com'
}
</script>

<style lang="css" scoped>
.box{
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>

Son2.vue

<template>
  <div class="box">
    <h2>Son2 子组件</h2>
    从vuex中获取的值:<label></label>
    <br />
    <button>值 - 1</button>
  </div>
</template>

<script>
export default {
  name: 'Son2Com'
}
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>

三、vuex 的使用 - 创建仓库

在这里插入图片描述

1.安装 vuex

安装vuex与vue-router类似，vuex是一个独立存在的插件，如果脚手架初始化没有选 vuex，就需要额外安装。

yarn add vuex@3 或者 npm i vuex@3

2.新建 store/index.js 专门存放 vuex

​ 为了维护项目目录的整洁，在src目录下新建一个store目录其下放置一个index.js文件。 (和 router/index.js 类似)

​在这里插入图片描述

3.创建仓库 store/index.js

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store()

// 导出仓库
export default store

4 在 main.js 中导入挂载到 Vue 实例上

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

此刻起, 就成功创建了一个 空仓库!!

5.测试打印Vuex

App.vue

created(){
  console.log(this.$store)
}

四、核心概念 - state 状态

1.目标

明确如何给仓库 提供 数据，如何 使用 仓库的数据

2.提供数据

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。

打开项目中的store.js文件，在state对象中可以添加我们要共享的数据。

// 创建仓库 store
const store = new Vuex.Store({
  // state 状态, 即数据, 类似于vue组件中的data,
  // 区别：
  // 1.data 是组件自己的数据, 
  // 2.state 中的数据整个vue项目的组件都能访问到
  state: {
    count: 101
  }
})

3.访问Vuex中的数据

问题: 如何在组件中获取count?

  1. 通过$store直接访问 —> {{ $store.state.count }}
  2. 通过辅助函数mapState 映射计算属性 —> {{ count }}

4.通过$store访问的语法

获取 store：
 1.Vue模板中获取 this.$store
 2.js文件中获取 import 导入 store


模板中：     {{ $store.state.xxx }}
组件逻辑中：  this.$store.state.xxx
JS模块中：   store.state.xxx

5.代码实现

5.1模板中使用

组件中可以使用 $store 获取到vuex中的store对象实例，可通过state属性属性获取count， 如下

<h1>state的数据 - {{ $store.state.count }}</h1>
5.2组件逻辑中使用

将state属性定义在计算属性中 https://vuex.vuejs.org/zh/guide/state.html

<h1>state的数据 - {{ count }}</h1>

// 把state中数据，定义在组件内的计算属性中
  computed: {
    count () {
      return this.$store.state.count
    }
  }
5.3 js文件中使用
//main.js

import store from "@/store"

console.log(store.state.count)

每次都像这样一个个的提供计算属性, 太麻烦了,我们有没有简单的语法帮我们获取state中的值呢？

五、通过辅助函数 - mapState获取 state中的数据

mapState是辅助函数，帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便的用法

用法 ：

在这里插入图片描述

1.第一步：导入mapState (mapState是vuex中的一个函数)

import { mapState } from 'vuex'

2.第二步：采用数组形式引入state属性

mapState(['count'])

上面代码的最终得到的是 类似于

count () {
    return this.$store.state.count
}

3.第三步：利用展开运算符将导出的状态映射给计算属性

  computed: {
    ...mapState(['count'])
  }

 <div> state的数据：{{ count }}</div>

六、开启严格模式及Vuex的单项数据流

1.目标

明确 vuex 同样遵循单向数据流，组件中不能直接修改仓库的数据

2.直接在组件中修改Vuex中state的值

在这里插入图片描述

Son1.vue

<button @click="handleAdd">值 + 1</button>


methods:{
	 handleAdd (n) {
      // 错误代码(vue默认不会监测，监测需要成本)
       this.$store.state.count++
      // console.log(this.$store.state.count) 
    },
}

3.开启严格模式

通过 strict: true 可以开启严格模式,开启严格模式后，直接修改state中的值会报错

state数据的修改只能通过mutations，并且mutations必须是同步的
在这里插入图片描述

七、核心概念-mutations

1.定义mutations

const store  = new Vuex.Store({
  state: {
    count: 0
  },
  // 定义mutations
  mutations: {
     
  }
})

2.格式说明

mutations是一个对象，对象中存放修改state的方法

mutations: {
    // 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state) {
      state.count += 1
    }
  },

3.组件中提交 mutations

this.$store.commit('addCount')

4.练习

1.在mutations中定义个点击按钮进行 +5 的方法

2.在mutations中定义个点击按钮进行 改变title 的方法

3.在组件中调用mutations修改state中的值

5.总结

通过mutations修改state的步骤

1.定义 mutations 对象，对象中存放修改 state 的方法

2.组件中提交调用 mutations(通过$store.commit(‘mutations的方法名’))

八、带参数的 mutations

1.目标：

掌握 mutations 传参语法

2.语法

看下面这个案例，每次点击不同的按钮，加的值都不同，每次都要定义不同的mutations处理吗？

在这里插入图片描述

提交 mutation 是可以传递参数的 this.$store.commit('xxx', 参数)

2.1 提供mutation函数（带参数）
mutations: {
  ...
  addCount (state, count) {
    state.count = count
  }
},
2.2 提交mutation
handle ( ) {
  this.$store.commit('addCount', 10)
}

小tips: 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象

this.$store.commit('addCount', {
  count: 10
})

九、练习-Vuex中的值和组件中的input双向绑定

1.目标

实时输入，实时更新，巩固 mutations 传参语法

在这里插入图片描述

2.实现步骤

在这里插入图片描述

3.代码实现

App.vue

<input :value="count" @input="handleInput" type="text">

export default {
  methods: {
    handleInput (e) {
      // 1. 实时获取输入框的值
      const num = +e.target.value
      // 2. 提交mutation，调用mutation函数
      this.$store.commit('changeCount', num)
    }
  }
}

store/index.js

mutations: { 
   changeCount (state, newCount) {
      state.count = newCount
   }
},

十、辅助函数- mapMutations

mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount'])
}

上面代码的含义是将mutations的方法导入了methods中，等价于

methods: {
      // commit(方法名, 载荷参数)
      addCount () {
          this.$store.commit('addCount')
      }
 }

此时，就可以直接通过this.addCount调用了

<button @click="addCount">值+1</button>

但是请注意： Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放置在actions中

十一、核心概念 - actions

state是存放数据的，mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化)，

actions则负责进行异步操作

说明：mutations必须是同步的

需求: 一秒钟之后, 要给一个数 去修改state

在这里插入图片描述

1.定义actions

对数据的改变还是要通过mutations，但是mutations对数据的修改是同步的，要异步修改数据可以通过actions，所以actions中只是做异步，对数据的修改还是通过调用mutations中的方法。

mutations: {
  changeCount (state, newCount) {
    state.count = newCount
  }
}


actions: {
  setAsyncCount (context, num) {
    // 一秒后, 给一个数, 去修改 num
    setTimeout(() => {
      context.commit('changeCount', num)
    }, 1000)
  }
},

2.组件中通过dispatch调用

setAsyncCount () {
  this.$store.dispatch('setAsyncCount', 666)
}

在这里插入图片描述

十二、辅助函数 -mapActions

1.目标：掌握辅助函数 mapActions，映射方法

mapActions 是把位于 actions中的方法提取了出来，映射到组件methods中

Son2.vue

import { mapActions } from 'vuex'
methods: {
   ...mapActions(['changeCountAction'])
}

//mapActions映射的代码 本质上是以下代码的写法
//methods: {
//  changeCountAction (n) {
//    this.$store.dispatch('changeCountAction', n)
//  },
//}

直接通过 this.方法 就可以调用

<button @click="changeCountAction(200)">+异步</button>

十三、核心概念 - getters

除了state之外，有时我们还需要从state中筛选出符合条件的一些数据，这些数据是依赖state的，此时会用到getters

例如，state中定义了list，为1-10的数组，

state: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}

组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它

1.定义getters

  getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }

2.使用getters

2.1原始方式-$store
<div>{{ $store.getters.filterList }}</div>
2.2辅助函数 - mapGetters
computed: {
    ...mapGetters(['filterList'])
}

 <div>{{ filterList }}</div>

十四、使用小结

在这里插入图片描述

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

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

相关文章

创建多层级行索引,创建多层级行索引的DataFrameMultiIndex.from_product()

创建多层级行索引,创建多层级行索引的DataFrameMultiIndex.from_product()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 创建多层级行索引, 创建多层级行索引的DataFrame MultiIndex.from_product() [太阳]选择题 使用pd.MultiIndex.from_product()&#xff0c;下列输出正确的是&#xff1a; import pandas as pd…
阅读更多...
【操作系统】考研真题攻克与重点知识点剖析 - 第 2 篇：进程与线程

【操作系统】考研真题攻克与重点知识点剖析 - 第 2 篇：进程与线程

前言 本文基础知识部分来自于b站&#xff1a;分享笔记的好人儿的思维导图与王道考研课程&#xff0c;感谢大佬的开源精神&#xff0c;习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析&#xff0c;本人技术…
阅读更多...
在Word中优雅的给公式编号，且自动更新

在Word中优雅的给公式编号，且自动更新

本文适用情景&#xff1a; 使用Word插入公式&#xff1b;需要给公式增加编号&#xff1b;且在正文中引用&#xff0c;支持自动更新序号。 Word自带公式编号 1 Word自带公式编辑器1.1 问题1.2 原因完美解决 2 MathType公式编辑器end: 后记&#xff1a; 1 Word自带公式编辑器 或…
阅读更多...
卡尔曼滤波EKF

卡尔曼滤波EKF

目录 一、概述 二、卡尔曼滤波的5个公式 三、应用案例&#xff1a;汽车运动 四、应用案例&#xff1a;温度估计 五、总结 一、概述 初学者对于卡尔曼滤波5个公式有点懵&#xff0c;本文先接地气地介绍5个公式&#xff0c;然后举两个常用例子加强理解&#xff0c;同时附有M…
阅读更多...
【媒体邀约】媒体宣传——企业成长的催化剂

【媒体邀约】媒体宣传——企业成长的催化剂

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 媒体宣传是企业成长的催化剂&#xff0c;它在各种方面对企业的成功和发展起到了关键作用。 1. 曝光和知名度&#xff1a; 媒体宣传可以将企业和其产品或服务推向广泛的受众&#xff0c;…
阅读更多...
Vue脚手架学习笔记

Vue脚手架学习笔记

视频 Vue脚手架学习笔记 1. 脚手架设置相关内容1.1 各文件的作用1.2 关闭语法检查 2. 组件的使用2.1 单文件组件的使用&#xff08;组件使用的三个步骤&#xff09;2.2 prop配置项&#xff1a;父向子传数据2.2.1 数组方式2.2.2 类型限制2.2.3 默认值、必要性 2.3 ref &#xf…
阅读更多...
Hello Qt！

Hello Qt！

目录 1. 什么是Qt 2. Qt中的模块 3. 下载安装 4. QtCreator 4. Hello Qt 解释 .pro 解释 main.cpp 解释 mainwindow.ui 解释 mainwindow.h 解释 mainwindow.cpp 5. Qt 中的窗口类 5.1 基础窗口类 5.2 窗口的显示 6. Qt 的坐标体系 7. 内存回收 1. 什么是Qt 是一…
阅读更多...
评估APP网页小程序代码UI开发H5估价师怎么评估开发精确研发价格？

评估APP网页小程序代码UI开发H5估价师怎么评估开发精确研发价格？

作为一名应用程序开发评估师&#xff0c;可能涉及到的主要任务是为特定的应用程序提供估算开发成本和所需时间预测。为了为一个应用程序更准确地评估价格&#xff0c;须遵循以下几个步骤&#xff1a; 问: 如何让一个App更好、更精确地评估出价格&#xff1f; 答: 以下是一个可…
阅读更多...
一款功能强大的web目录扫描器专业版

一款功能强大的web目录扫描器专业版

dirpro 简介 dirpro 是一款由 python 编写的目录扫描器&#xff0c;操作简单&#xff0c;功能强大&#xff0c;高度自动化。 自动根据返回状态码和返回长度&#xff0c;对扫描结果进行二次整理和判断&#xff0c;准确性非常高。 已实现功能 可自定义扫描线程 导入url文件进…
阅读更多...
1. Collection，List, Map, Queue

1. Collection，List, Map, Queue

1. java集合框架体系结构图 2. Collection派生的子接口 其中最重要的子接口是&#xff1a; 1&#xff09;List 表示有序可重复列表&#xff0c;重要的实现类有&#xff1a;ArrayList, LinkedList ArrayList特点&#xff1a;底层数组实现&#xff0c;随机查找快&#xff0c;增删…
阅读更多...
centos 上redis以及远程连接工具rdm安装与使用

centos 上redis以及远程连接工具rdm安装与使用

目录 一 安装包准备 二 安装 三 启动 redis 四 rdm 连接 redis 一 安装包准备 redis 6.2.4 网盘资源&#xff1a; 链接: https://pan.baidu.com/s/1R120Va9FEyraLdiPe9fBHg?pwdgq9i 提取码: gq9i rdm 网盘资源&#xff1a; 链接: https://pan.baidu.com/s/1GiYnfIuQdSUmM…
阅读更多...
服装展示服务预约小程序的内容如何

服装展示服务预约小程序的内容如何

互联网电商深入&#xff0c;很多服装商家开始线上卖货经营、会员管理及私域营销等&#xff0c;这也是当今商家们的一个优选项&#xff0c;当然除了直接卖货以外&#xff0c;展示和预约、客户交互也同样是不少商家需要的。 那么商家通过服装展示预约小程序能够实现什么效果呢&a…
阅读更多...
19 数据中心详解

19 数据中心详解

1、数据中心的概念 其实平时我们不管是看新闻&#xff0c;视频&#xff0c;下载文件等&#xff0c;最终访问的目的地都是在数据中心里面。数据中心存放的是服务器&#xff0c;区别于我们平时使用的笔记本或者台式机。 机架&#xff1a;数据中心的服务器被放在一个个叫作机架&…
阅读更多...
【发布】DDD 工程脚手架 + 一键安装分布式技术栈环境！

【发布】DDD 工程脚手架 + 一键安装分布式技术栈环境！

作者&#xff1a;小傅哥 博客&#xff1a;https://bugstack.cn 沉淀、分享、成长&#xff0c;让自己和他人都能有所收获&#xff01;&#x1f604; 大家好&#xff0c;我是技术UP主小傅哥。 写了那么多案例工程&#xff0c;开发了那么多技术项目。那小傅哥做的这些案例和项目是…
阅读更多...
第十八章总结

第十八章总结

一.Swing概述 二.Swing常用窗体 1.JFrame窗体 创建一个不可见、具有标题的窗体&#xff0c;关键代码&#xff1a; JFrame jfnew JFrame("登陆系统"); Container containerjf.getContentPane(); 在创建窗体后&#xff0c;先调用getContentPane()方法将窗体转…
阅读更多...
2023年Q3乳品行业数据分析（乳品市场未来发展趋势）

2023年Q3乳品行业数据分析（乳品市场未来发展趋势）

随着人们生活水平的不断提高以及对健康生活的追求不断增强&#xff0c;牛奶作为优质蛋白和钙的补充品&#xff0c;市场需求逐年增加。 今年Q3&#xff0c;牛奶乳品市场仍呈增长趋势。根据鲸参谋电商数据分析平台的相关数据显示&#xff0c;2023年7月-9月&#xff0c;牛奶乳品市…
阅读更多...
C# OpenCvSharp 通过特征点匹配图片

C# OpenCvSharp 通过特征点匹配图片

SIFT匹配 SURF匹配 项目 代码 using OpenCvSharp; using OpenCvSharp.Extensions; using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using System.Text.RegularExpressions; using System.Windows.Forms; using static System.Net…
阅读更多...
(C++17) variant的使用与union对比

(C++17) variant的使用与union对比

文章目录 前言与需求union内存映射图C11的union 使用ref示例构造普通构造置空emplacemonostate 访问std::get<>std::holds_alternative<>获取指针std::get_if<>获取可选数量个数std::variant_size END 前言与需求 联合体&#xff0c;是在C语言时代就存在的概…
阅读更多...
Global_Mapper_Pro_25.0安装教程大全

Global_Mapper_Pro_25.0安装教程大全

一. 下载&#xff1a; http://dt1.8tupian.net/2/29913a55b1000.pg3二. 介绍&#xff1a; Global Mapper Pro 25是领先的GIS数据处理解决方案&#xff01;提供了一整套符合标准的功能来提升您的操作和技能&#xff0c;您可以最合理的利用您的工具集来完成以前复杂的工作任务&a…
阅读更多...
矢量图形编辑软件Boxy SVG mac中文版软件特点

矢量图形编辑软件Boxy SVG mac中文版软件特点

Boxy SVG mac是一款基于Web的矢量图形编辑器&#xff0c;它提供了一系列强大的工具和功能&#xff0c;可帮助用户创建精美的矢量图形。Boxy SVG是一款好用的软件&#xff0c;并且可以在Windows、Mac和Linux系统上运行。 Boxy SVG mac软件特点 简单易用&#xff1a;Boxy SVG的用…
阅读更多...
最新文章

Copyright @ 2022~2023