首页 > 其他分享 >在Vue3中使用vuex

在Vue3中使用vuex

时间:2024-10-09 15:32:50浏览次数:7  
标签:Vue3 state num export 使用 import vuex store

官方文档
vue3+ts

一、安装

npm install vuex@next --save

二、创建并引入

1.新建store文件夹,在store目录下新建index.js

import { createStore } from 'vuex'

export default createStore({
  state: {

  },
  mutations: {

  },
  actions: {

  }
  modules: {

  }
})

2.在main.js中引入

import store from './store'
app.use(store)

3.简单使用

假设已定义count参数

<template>
    <!-- 1、直接取用 -->
    <p>{{ $store.state.num }}</p>
    <p>{{ num }}</p>
</template>

import { computed } from "vue"
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    // 2、使用计算属性的方式
    const num = computed(() => store.state.num)
    return { num }
  }
}

标签:Vue3,state,num,export,使用,import,vuex,store
From: https://www.cnblogs.com/amnesia999/p/18454195

相关文章

  • 使用python对交换机进行排障自动化运维(锐捷)
    importglobimporttelnetlibimportrefromdatetimeimportdatetimefromtimeimportsleepimportpandasaspdimportosimporttimefrommatplotlibimportpyplotasplt#Telnet连接函数defconnect_telnet(hostname,username,password):  try:  ......
  • 使用宝塔快速搭建配置Openai api接口代理+502 Bad Gateway网关错误问题解决
    本教程提供了一种简便快捷的方法,无需复杂步骤,极易操作,实现零代码、零部署的快速接入。实现准备1.服务器,这里使用阿里香港轻量服务器)2.OpenAI官方的模型apikey3.使用第三方系统或插件进行测试关于第三方网站系统或插件:《SparkAI系统介绍文档-渐进式AIGC系统》开......
  • Kingst 金思特 LA5016逻辑分析仪 简单入门使用
    前言:这里我仅简单介绍一下Kingst金思特LA5016逻辑分析仪简单入门使用这个软件的快熟上手使用,有补充的话后续在跟新。购买硬件和安装相关软件。软件直接官网下载即可连接如下:。需要说明的是不仅仅只是LA5016,软件同时也兼容其他版本。使用体验:这个Kingst金思特LA5016逻......
  • 5、ELK-kibana使用
    ELK使用当filebeat、logstash、elasticsearch、kibana都启动后。日志会自动采集,并存放到elasticsearch中。通过kibana可以查看结果:1、management---index_management---创建index  2、discover Error:RequestTimeoutafter30000ms方法2、修改kibana的超时时间......
  • 《DNK210使用指南 -CanMV版 V1.0》第二十八章 音频播放实验
    第二十八章音频播放实验1)实验平台:正点原子DNK210开发板2)章节摘自【正点原子】DNK210使用指南-CanMV版V1.03)购买链接:https://detail.tmall.com/item.htm?&id=7828013987504)全套实验源码+手册+视频下载地址:http://www.openedv.com/docs/boards/k210/ATK-DNK210.html5)正点原......
  • 8、使用search-guard加固安全为https访问
    使用search-guard加固安全为https访问1、ES安装search-guard安装1、在linux上下载介质。下载后无需解压。wgethttps://releases.floragunn.com/search-guard-6/6.8.3-25.5/search-guard-6-6.8.3-25.5.zip2、停止ES运行。3、使用ES已有的插件工具,安装命令如下。会自动在ES......
  • EhViewer新手开源项目教程!一文教你安装与高效使用!
    深入探索EhViewer:Android用户的终极漫画体验应用在这个技术迅速发展的时代,寻找能够提供无缝且高效用户体验的应用变得尤为重要。本文将详细介绍EhViewer,这是一款专为Android平台开发的开源软件,针对E-Hentai网站的忠实粉丝而设计,由HippoSeven、NekoInverter和TarsinNorbin......
  • python/NumPy库的使用
    1.NumPy的主要特点:高性能的多维数组对象:NumPy的核心是ndarray,它是一个高性能的多维数组对象。广播功能:NumPy提供了广播(broadcasting)功能,允许不同形状的数组进行数学运算。集成C/C++代码:NumPy可以无缝集成C/C++代码,提高性能。广泛的数学函数库:提供了大量的数学函数,包括线性代数......
  • vue3中如何实现通用头部?
    在Vue中实现通用头部可以通过以下几种方式:一、使用Vue组件创建头部组件首先,创建一个名为HeaderComponent.vue的Vue组件文件。在这个组件中,可以使用Vue的模板语法来设计头部的结构,例如包含导航栏、品牌标志、搜索框等元素。<template><header><......
  • SonarQube的安装与使用
    SonarQube的安装与使用 一、说明:SonarQube7.8以上只支持jdk11版本并且不支持mysql数据库本次安装为Windows环境版本信息如下:1、sonarqube        —7.72、Sonar-scanner-cli   —4.5.03、Postgre           —10.1 二、解压附件中的sonar......