vuex在vite&vue3中的简单使用说明

目录
  • vuex在vite&vue3的使用
    • 一、说明
    • 二、使用
  • vue3.x之vite初体验
    • 一、项目搭建
    • 二、附项目结构
    • 三、附项目启动成功图

vuex在vite&vue3的使用

注：本文只讲解vite打包vue3中vuex使用

一、说明

最近vite十分火爆，在构建项目过程中，想要用到vuex，但是在晚上搜索教程过程中，发现大都为vue2以下或者非vite版本的使用。

在这里总结一下vite打包中vue3下使用vuex的使用方式以及遇到的一些坑。

二、使用

1.创建项目（通过vite命令创建）

项目创建好之后在src创建store文件夹

2.安装vuex

npm install vuex@next --save

这里注意，vite打包的项目中使用vuex需要添加@next，否则将不能使用createStore方法，如果遇到以下错误，可检查vuex版本（"vuex": "^4.x"即为正确）

3.配置vuex

这里配置有很多方法，可以通过自己的业务逻辑来设置

import { createStore } from 'vuex'
export default createStore({
  state: {
    name: 'default'
  },
  mutations: {
    name: (state, newValue) => {
      state.name = newValue
    }
  },
  actions: {
    setName: (ctx, value) => {
      ctx.commit('name', value)
    }
  }
})
  • name为我们根据业务逻辑来定义的一个状态值
  • setName为我们在页面中调用的一个操作函数名称
  • mutations中的函数为变更状态的逻辑

4.页面中使用vuex

<script setup>
import { ref, computed } from 'vue'
import $store from '@/store/index'
// 通过store中的name值来获取计算属性
const name = computed(() => $store.state.name)
const count = ref(0)
const handleVuex = async () => {
  count.value += 1
  // 向store中提交新的值，调用action中的setName函数
  await $store.dispatch('setName', 'new-value' + count.value)
}
</script>
<template>
  <div>
    <p>{{ name }}</p>
    <button type="button" @click="handleVuex">vuex</button>
  </div>
</template>

效果

对于初学者来说，vuex可能是一个进阶的使用，但是通过本文，我相信会改变你的想法

我只提供了vuex的一种使用方式，但是大同小异，大家学着使用起来吧

vue3.x之vite初体验

vite 使用

一、项目搭建

<project-name>为项目名
$ npm init vite-app <project-name>
$ cd <project-name>  //进入项目目录
$ npm install  //安装项目所需依赖
$ npm run dev  //启动项目

二、附项目结构

三、附项目启动成功图

Vite启动极快，体验很好，与vue CLI相比目录结构变化不大，使用vue CLI的同学很快就能上手。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vite2.0+vue3移动端项目实战详解

    一.涉及技术点 vite版本 vue3 ts 集成路由 集成vuex 集成axios 配置Vant3 移动端适配 请求代理 二.步骤 vite+ts+vue3只需要一行命令 npm init @vitejs/app my-vue-app --template vue-ts 配置路由 npm install vue-router@4 --save 在src下新建router目录,新建index.ts文件 import { createRouter, createWebHashHistory, Ro

  • Vue3和Vite不得不说的那些事

    Vue3和Vite不得不说的那些事

    目录 1.创建一个vite项目 2.vite简介 3.第一个疑问 3.1挖掘vite运行原理 为什么这里需要@modules? 3.2文件请求 4.hmr热更新 总结 1.创建一个vite项目 npm init vite-app <project-name> cd <project-name> npm install npm run dev 或者 yarn create vite-app <project-name> cd <project-name> ya

  • Vue3中vuex的基本使用方法实例

    Vue3中vuex的基本使用方法实例

    目录 一.基本结构 二.基本使用 三.将store中的数据模块化后的使用 1.模块化 2.使用 补充:如何改变vuex中的属性 总结 一.基本结构 src/store/index.js中,代码如下 // vue3中创建store实例对象的方法createStore()按需引入 import { createStore } from 'vuex' export default createStore({ state: { }, mutations: { }, actions: { }, gette

  • vuex在vite&vue3中的简单使用说明

    vuex在vite&vue3中的简单使用说明

    目录 vuex在vite&vue3的使用 一.说明 二.使用 vue3.x之vite初体验 一.项目搭建 二.附项目结构 三.附项目启动成功图 vuex在vite&vue3的使用 注:本文只讲解vite打包vue3中vuex使用 一.说明 最近vite十分火爆,在构建项目过程中,想要用到vuex,但是在晚上搜索教程过程中,发现大都为vue2以下或者非vite版本的使用. 在这里总结一下vite打包中vue3下使用vuex的使用方式以及遇到的一些坑. 二.使用 1.创建项目(通过vite命令

  • vite+vue3中使用mock模拟数据问题

    目录 1.安装mockjs和vite-plugin-mock 2.在vite.config.ts文件中配置 3.在根目录下创建mock文件夹 4.在文件中调用 5.其他 总结 1.安装mockjs和vite-plugin-mock npm i mockjs vite-plugin-mock --save-dev 2.在vite.config.ts文件中配置 vite-plugin-mock使用方式 import { defineConfig } from 'vite' import vue fr

  • vue3中vuex与pinia的踩坑笔记记录

    目录 介绍 安装使用 简单对比写法差异与共同点 Vuex 和 Pinia 的优缺点 何时使用Pinia,何时使用Vuex 总结 介绍 Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎.它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库. Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性.存储模块组织.状态变化分组.多存储创建等). 另一方面,Vuex也是为Vue框架建立的一个流行的状态管理库,它也是Vue核心团队推荐的状态管理库.Vuex高度关注应

  • vue3中如何用threejs画一些简单的几何体

    vue3中如何用threejs画一些简单的几何体

    目录 前言 threejs简述 依赖包版本 vue3操作DOM 创建场景,相机,渲染器本节及后续都在initThree方法中写 立方体 球体 圆柱体 坐标系 点光源 鼠标操作旋转,缩放 球体,立方体自动旋转 initThree完整代码 总结 前言 在vue3中使用threejs画了几个最简单的几何体,自动旋转的立方体,圆柱体,球体,并且加入了光照,几何体影阴部分即光没照到的地方,成果如下,感兴趣的可以看看具体实现过程~ threejs简述 Three.js是基于原生WebGL封装运行的三维引擎

  • Vue3中Vuex状态管理学习实战示例详解

    目录 引言 一.目录结构 二.版本依赖 三.配置Vuex 四.使用Vuex 引言 Vuex 是 Vue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ index.

  • 图文详解如何在vue3+vite项目中使用svg

    图文详解如何在vue3+vite项目中使用svg

    今天在vue3+vite项目练习中,在使用svg时,发现之前的写法不能用,之前的使用方法参考vue2中优雅的使用svg const req = require.context('./icons/svg', false, /\.svg$/) const requireAll = requireContent => requireContent.keys().map(requireContent) requireAll(req) 然后就各种资料查找,终于实现了,废话不多说,直接上代码: stept1

  • vue3中router路由以及vuex的store使用解析

    目录 vue3 router路由及vuex store使用 1.路由 2.vuex vue3中router路由和vuex的store使用,获取对象基本使用 vue3中router和store使用方法 1.企业开发Router全局配置 2.企业开发Store全局配置 功能快捷键 vue3 router路由及vuex store使用 1.路由 <script> import { useRouter, useRoute } from 'vue-router' export default {   s

  • vue3中的hook简单封装

    vue3中的hook简单封装

    目录 vue3的hook封装 vue3的hooks总结 下面总结一下如何去书写hooks 计数器的hook vue3的hook封装 vue3最新鲜的就是组合式API了,通过组合式API我们可以把一些复杂的逻辑或一些常用的逻辑封装成一个个hook来进行调用,这样的方式也更易于维护. 使用 import useTest from "../../hooks/useTest"; export default defineComponent({   name: "vue3Test&qu

  • Vue3中Vuex的详细使用方法

    Vue3中Vuex的详细使用方法

    目录 Vuex是做什么的? 状态管理是什么? 单页面的状态管理 vuex(Vue3.2版本) 多页状态管理 vuex store对象属性介绍 Vue3中获取 store 实例对象的方法 1. state 2. mutations 3. actions 4. getters 5. modules 总结 Vuex是做什么的? Vue官方:状态管理工具 状态管理是什么? 需要在多个组件中共享的状态.且是响应式的.一个变,全都改变. 例如一些全局要用的的状态信息:用户登录状态.用户名称.地理位置信息.购

随机推荐