vuejs基础之共有数据vuex

2024-06-22 17:18

本文主要是介绍vuejs基础之共有数据vuex,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 1 vuex简介
    • 1.1 安装引入
      • 1.1.1 普通网页引入
      • 1.1.2 NPM方式安装
  • 2 使用方式
    • 2.1 实例构造
    • 2.2 主要属性
      • 2.2.1 五大核心属性介绍
        • 2.2.1.1 state
        • 2.2.1.2 getters
        • 2.2.1.3 mutations
        • 2.2.1.4 actions
        • 2.2.1.5 modules
      • 2.2.2 辅助函数
        • 2.2.2.1 mapState
        • 2.2.2.2 mapGetters

1 vuex简介

vuexVue 配套的 公共数据管理工具,它可以把一些共享数据,保存到 vuex 中,方便整个程序中的任何组件直接获取或修改我们的公共数据;
Vuex是为了保存组件之间共享数据而诞生的,如果组件之间有要共享数据,可以直接挂载到vuex中,而不必通过父子组件之间传值了,如果组件的数据不需要共享,此时,这些不需要共享的私有数据,没有必要放到vuex中:
使用的限制如下:

  • 只有共享的数据,才有权利放到vuex中;
  • 组件内部私有的数据,只要放到组件的data中即可;
  • propsdatavuex的区别

vuex官方文档

1.1 安装引入

1.1.1 普通网页引入

普通引入的方式,会直接安装到vue中去

<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vuex.js"></script>

1.1.2 NPM方式安装

安装依赖的包

npm install vuex 

加载vuex插件

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

2 使用方式

2.1 实例构造

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
var store = new Vuex.Store({state:{//可以把state想象组件中的data	count:0},mutations:{increment(state){state.count++ ;}}//如果组件想要调用mutations中的方法需要使用this.$store.commit('方法名');
});const vm = new Vue({el:'#app',//通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到store:store, //把vuex创建的store挂载到vue实例对象中去,到时候通过this.$store.对应属性来获取
});

2.2 主要属性

对于这些属性的获取都是通过this.$store.对应属性来获取

2.2.1 五大核心属性介绍

五大核心:state, getters, mutations, actions, modules

2.2.1.1 state

statevuex的基本数据,用来存储变量

 state: {userId: '',name: '',token: '',}

vue中使用this.$store.state.userId来获取存储的值

2.2.1.2 getters

getters:从基本数据(state)派生的数据,相当于state的计算属性,具有返回值的方法

  getters: {userIdDouble: function(state){return state.userId * 2}

vue中使用 this.$store.getters.userIdDouble

2.2.1.3 mutations

mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。

  mutations: {SET_USER: (state, userId) => {state.userId = userId},SET_TOKEN: (state, token) => {// console.log(token)state.token = token}},

commit:同步操作,写法: this.$store.commit(‘mutations方法名’,值)
例如:

this.$store.commit('SET_USER','123456')

回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,第二个参数为提交过来的参数
多参数传递
由于mutations多个参数的传递最多是两个参数,对于多参数传递的话可以把第二个参数作为对象传递
调用方法:

this.$store.commit('substract',{c:1,d:2});

定义方法:

mutations: {substract (state, obj) {console.log(obj.c+"===="obj.d);}
2.2.1.4 actions

actions:与mutations的功能大致相同,不同之处在于

  1. Actions 提交的是 mutations,而不是直接变更状态
  2. Actions 可以包含任意异步操作
  actions: { // {} 是es6中解构,把对象解构成属性login({ commit }, value) {commit('SET_USER', value)// commit('SET_TOKEN', value2)},}

dispatch:异步操作,写法:this.$store.dispatch(‘mutations方法名’,值)

2.2.1.5 modules

modules:模块化vuex,可以让每一个模块拥有自己的statemutationsactionsgetters,使得结构非常清晰,方便管理。
简单来说就是可以把以上的statemutationsactionsgetters 整合成一个user.js,然后放到store.js里面
例子如下:

import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
export default Vuex.store(//state:{},//mutations:{},//actions:{},modules:{user},
);

2.2.2 辅助函数

2.2.2.1 mapState

当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键
首先需要单独引入mapState的函数:import { mapState } from 'vuex'

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {// ...computed: mapState({// 箭头函数可使代码更简练count: state => state.count,// 传字符串参数 'count' 等同于 `state => state.count`countAlias: 'count',// 为了能够使用 `this` 获取局部状态,必须使用常规函数countPlusLocalState (state) {return state.count + this.localCount}})
}
2.2.2.2 mapGetters

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

import { mapGetters } from 'vuex'export default {// ...computed: {// 使用对象展开运算符将 getter 混入 computed 对象中...mapGetters(['doneTodosCount','anotherGetter',// ...])}
}

这篇关于vuejs基础之共有数据vuex的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1084911

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后,随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步,我们目前的解决方案是建立数据中间表。把需要检索的业务数据,统一放到一张M

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

异构存储(冷热数据分离)

异构存储主要解决不同的数据,存储在不同类型的硬盘中,达到最佳性能的问题。 异构存储Shell操作 (1)查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies (2)为指定路径(数据存储目录)设置指定的存储策略 hdfs storagepolicies -setStoragePo

Hadoop集群数据均衡之磁盘间数据均衡

生产环境,由于硬盘空间不足,往往需要增加一块硬盘。刚加载的硬盘没有数据时,可以执行磁盘数据均衡命令。(Hadoop3.x新特性) plan后面带的节点的名字必须是已经存在的,并且是需要均衡的节点。 如果节点不存在,会报如下错误: 如果节点只有一个硬盘的话,不会创建均衡计划: (1)生成均衡计划 hdfs diskbalancer -plan hadoop102 (2)执行均衡计划 hd

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06