【Vue】vuex 的使用 - 创建仓库

news/2024/6/19 7:03:07

通用的地方我们一般会称之为仓库

68321278417

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 类似)

68321280582

3.创建仓库 store/index.js

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)// 创建仓库 store
// 由于创建的不是Vuex,而是仓库,Vuex里面有一个创建仓库的语法:挂载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/index'Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')

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

5.测试打印Vuex

App.vue

created(){// 配置成功返回一个对象,没配成功返回undefined// 检验路由有没有配置成功console.log(this.$router)// 检验仓库有没有配置成功console.log(this.$store)
}

https://dhexx.cn/news/show-5385024.html

相关文章

Docker:认识镜像仓库及其命令

文章目录 Docker Registry什么是Docker Registry 镜像仓库工作机制使用流程实际使用方法仓库的拉取机制 常用的镜像仓库---DockerHub什么是DockerHub私有仓库 镜像仓库命令docker logindocker pulldocker pushdocker searchdocker logout Docker Registry 什么是Docker Regist…

在 TypeScript 中,定义类型时你用 Types 还是 Interfaces?

什么是 Types 和 Interfaces? Types 和 Interfaces 是 TypeScript 中两种用于定义数据结构的工具。它们可以帮助开发者在编写代码时约束变量和对象的类型,从而减少错误并提高代码的可读性。 Types:Types 允许你定义各种类型,包括基…

解决关于git clone 带子模块的项目得到的源码不完整,导致编译失败的解决办法

在使用 git 克隆一个项目的时候,你可能会碰到克隆后编译失败的情况,经过查找,发现原来是缺少一些文件,这些文件都有一个特点,如图: 要解决这个问题,需要在clone 命令的基础上加上一些参数 &…

Python的Pillow(图像处理库)非常详细的学习笔记

Python的Pillow库是一个非常强大的图像处理库。 安装Pillow库: 在终端或命令行中输入以下命令来安装Pillow: pip install pillow 安装后查看是否安装成功以及当前版本 pip show Pillow 升级库: pip install pillow --upgrade 一些基…

2023 hnust 湖科大 嵌入式 实验报告+代码及复习资料等

2023 hnust 湖科大 嵌入式 实验报告代码及复习资料等 目录 流水灯 1 8位数码管动态扫描 3 按键输入 5 温度与关照 7 看门狗 9 内容 报告 代码 下载链接 https://pan.baidu.com/s/1LIN8rm42yrukXliI3XyZ1g?pwd1111

聊聊对Andorid的FileProvider的理解

最近在项目中遇到一个有关FileProvider的问题,由此来学习了一下FileProvider,有关笔记记录如下。 FileProvider是 Android 系统中一个特殊的内容提供者(ContentProvider), 它主要用于应用之间安全的共享文件。通过 FileProvider,应用可以生成一个 conte…

QNX 7.0.0开发总结

1 QNX编译 1.1 基本概念 QNX可以直接使用Linux Makefile编译库和二进制,在Makefile文件中指定CCaarch64-unknown-nto-qnx7.0.0-g,或者CCx86_64-pc-nto-qnx7.0.0-g,保存退出后,运行source /qnx_sdk_path/qnxsdp-env.sh,…

iOS18首个Beta测试版发布,功能介绍附beta升级办法!

今天凌晨,一年一度的苹果WWDC24开发者大会正式开幕,发布了iOS 18、iPadOS 18、macOS Sequoia、watch OS11等新系统。 大会结束后,苹果火速发布了首个iOS 18开发者Beta版,目前有开发者资格的用户已经可以下载体验尝鲜了。 本次更新…

C++学习日记 | LAB 7 shared library 共享库

资料来源:南科大 于仕琪 C/C Program Design LINK:CPP/week07 at main ShiqiYu/CPP GitHub 一、本节内容 本节主要介绍建立共享库的内容。习题主要内容为 共享库将开发人员希望与其他开发人员共享的功能的编译代码打包在一起。共享库通常具有以下特点…

从数据采集到部署,手把手带你训练一个高质量的图像分类模型

本文来自社区投稿,作者李剑锋 MMPreTrain 是一款基于 PyTorch 的开源深度学习预训练工具箱,本文将从数据采集到部署,手把手带大家使用 MMPreTrain 算法库训练一个高质量的图像分类模型。 MMPreTrain 项目链接: https://github.co…