手搭手浅学状态管理VueX

https://vuex.vuejs.org/zh/guide/

每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

状态自管理应用包含以下几个部分:

  • state,驱动应用的数据源;
  • view,以声明方式将 state 映射到视图;
  • actions,响应在 view 上的用户输入导致的状态变化。

Vuex简单来说是数据共享的一个容器

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension(opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

安装

npm install vuex

使用

为了在 Vue 组件中访问 this.$store property,需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件,以 store 选项的方式“注入”该 store 的机制

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({

    state: {

      count: 0

    },

    mutations: {

      increment (state) {

        state.count++

      }

    }

  })
export default store  //导出

main.js导入

State

应用方式一

{{this.$store.state.count}}

应用方式二 computed

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

应用方式三 mapState辅助函数

computed:{
    //1、箭头函数
    count: state => state.count
    // 2、传字符串参数 'count' == state => state.count
     countAlias: 'count',
    //3、使用this获取局部状态,必须使用常规函数
    countState(state){
      return state.count + this.localCount
    }

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

最简便的方式

  computed: mapState([
    'count'
    ]),

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle(2-9) Oracle Recovery Manager Overview and Configuration

文章目录 一、基础知识1、User Backup VS RMAN2、Restoring &Recovering DB 还原&恢复数据库3、Recovery Manager Features 管理恢复功能4、RMAN Components RMAN组件5、Repository1: Control File 存储库1:控制文件6、Channel Allocation 通道道分配7、Media Manageme…

举例C#使用特性排除某些类成员不参与XML序列化和反序列化

在C#中,可以使用 [XmlIgnore] 特性来排除某些类成员不参与XML序列化和反序列化。这个特性告诉XML序列化器忽略被标记的成员。 以下是一个使用 [XmlIgnore] 特性的示例: using System; using System.IO; using System.Xml.Serialization;public class P…

[Azure]azure磁盘加密(Windows/Linux) ADE(Azure Disk Encryption)

Azure 磁盘加密用于保护数据,对于Windows使用BitLocker对磁盘进行加密,同时与Key Vault集成,控制和管理Key和Secret。 本文利用Potal对磁盘进行加密 注:Azure DIsk Encryption 可能会导致VM重启,对VM造成影响&#xff…

Linux下安装MySQL 5.7

1、下载安装包 wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm 2、安装MySQL包 yum -y install mysql57-community-release-el7-10.noarch.rpm 3、安装MySQL yum -y install mysql-community-server 如果出现下图失败情形,则…

基于Docker构建Python开发环境

1. Dockerfile dockerfile所在目录结构 FROM python:3.8 WORKDIR /leo RUN apt-get install -y wget RUN /bin/cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo Asia/Shanghai >/etc/timezone # ssh免密登录 COPY id_rsa.pub /leo RUN mkdir ~/.s…

JavaScript的注意事项(纯文字,无代码)

以下是关于JavaScript的注意事项: #始终使用分号 JavaScript是一门解释性的语言,因此在编写代码时,使用分号可以防止程序在运行时出现问题。在一个语句末尾加上分号可以告诉解释器,该语句已经结束,可以继续执行下一条…

[ROS2] --- ROS2安装

ROS2安装到Ubuntu2204系统中,安装步骤如下: 1 设置编码 $ sudo apt update && sudo apt install locales $ sudo locale-gen en_US en_US.UTF-8 $ sudo update-locale LC_ALLen_US.UTF-8 LANGen_US.UTF-8 $ export LANGen_US.UTF-82 添加源 $…

【开源】基于JAVA语言的天沐瑜伽馆管理系统

项目编号: S 039 ,文末获取源码。 \color{red}{项目编号:S039,文末获取源码。} 项目编号:S039,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 瑜伽课程模块2.3 课…

创建conan包-Understanding Packaging

创建conan包-Understanding Packaging 1 Understanding Packaging1.1 Creating and Testing Packages Manually1.2 Package Creation Process 本文是基于对conan官方文档Understanding Packaging翻译而来, 更详细的信息可以去查阅conan官方文档。 1 Understanding …

智能优化算法应用:基于适应度相关算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于适应度相关算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于适应度相关算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.适应度相关算法4.实验参数设定5.算法结果…

vue3 vue-router的安装及配置 (一)

文章目录 一、安装二、Vue Router配置2.1 vue-router两种引入方式的区别2.2 不同的历史模式 三、router-link四、router-view Vue Router作用:在应用程序中实现优雅的导航和路由管理。 一、安装 注意:vue3安装的是vue-router4,vue2安装的是vue-router3…

大学里面转专业介绍

目录 个人情况转专业过程中的经验分享转专业后的学习建议和心态调整转专业后的时间平衡 个人情况 信息科学与工程学院计算机科学与技术专业2019级本科生,曾从物理与微电子科学学院后转入信息科学与技术学院。学习成绩连续三年专业前10% 项目:爬虫项目、…

python-单词本|通讯录

编写程序,生词本。 def sayHello():print("" * 20 \n 欢迎使用生词本\n 1.查看生词本\n 2.背单词\n 3.添加新单词\n 4.删除单词\n 5.清空生词本\n 6.退出生词本\n * 20 \n)def addW(data):word input("请输入新单词:")trans i…

ai学习之快捷键介绍

ai2021学习之快捷键介绍 F 全屏Ctr Y ,可以在去色和全色中切换。Shift O 画板工具CtrlALTY 将矢量图转为位图。Ctrl R 可以显示标尺, CTRL冒号(:;) 隐藏参考线智能参考线CTRLshirtz 撤回撤回的撤回 Ai是一个…

Mysql、Oracle区分大小写?

Mysql Windows 系统的文件名不区分大小写,所以运行在 Windows 系统上面的 MySQL 服务器也不用区分数据库名和表名的大小写。Linux 系统大小写规则: 数据库名与表名严格区分大小写表的别名严格区分大小写变量名严格区分大小写列名与列的别名忽略大小写 M…

python flask Jinja2模板学习

分类很好的一篇文章 Jinja2模板语法 Jinja2里常见的三种定界符: (1) 语句 {% ... %}(2) 表达式 {{ ... }}(3) 注释 {# ... #} {%set adazhaung%} 语句设置变量{{a}} 表达式{% if 2>1 %}控制语句以{%endif%}结尾 Jinja2支持使用“.”获取变量的属…

Python小案例:99乘法表打印

99乘法表的打印 分析: 1、需要利用两次循环进行控制循环次数 2、通过print参数进行控制打印样式 代码部分 # 外循环实现层级 for i in range(1,10):# 内循环控制计算for j in range(1,i1):# 利用print函数结尾end参数控制打印print(f"{j}*{i}{j*i}",e…

为什么当初我选择计算机

关于这个话题,其实我在选这个专业之前对这个领域一无所知,只是很羡慕万能的码农,每当看到同学分享自己的作品,都觉得这个人好厉害,我什么时候才能像TA一样做出来这么一个作品。 其实现在回想起来,不经感叹自…

FPGA时序分析与时序约束(一)

一、为什么要进行时序分析和时序约束 PCB通过导线将具有相关电气特性的信号相连接,这些电气信号在PCB上进行走线传输时会产生一定的传播延时。 而FPGA内部也有着非常丰富的可配置的布线资源,能够让位于不同位置的逻辑资源块、时钟处理单元、BLOCK RAM、D…

【未解决】huggingface模型文件下载地址为什么会变?

问题描述 上次我们已经分析了huggingface加载模型时候的文件目录应该是怎么样的?(感兴趣的可以主页搜索“【经验分享】huggingface模型加载过程下载到cache文件目录具体是怎么组织的?以及都会有什么文件目录,每个文件目录是什么&a…