vue3+vite,vue3 使用vuex

　　本文主要介绍了vitevue3中vuex的简单使用说明，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

vuex在vitevue3的使用

　　注意：本文只解释了vuex在vite包vue3中的使用。

一、说明

　　最近很流行vite。在搭建项目的过程中，想用vuex，但是在晚上搜索教程的过程中，发现大部分都是vue2以下或者非vite版本。

　　这里总结一下vite封装中vue3下vuex的用法和遇到的一些坑。

二、使用

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

　　创建项目后，在src中创建store文件夹

　　2.安装vuex

　　npm安装vuex@next - save

　　这里注意需要添加@next才能在vite打包的项目中使用vuex，否则无法使用createStore方法。如果您遇到以下错误，您可以检查vuex版本(“vuex”:^4.x是正确的)

　　3.配置vuex

　　这里有很多种配置方式，可以根据自己的业务逻辑来设置。

　　从“vuex”导入{ createStore }

　　导出默认的createStore({

　　状态：{

　　名称：“默认”

　　突变：{

　　名称：(状态，新值)={

　　state.name=newValue

　　}

　　动作：{

　　集合名：(ctx，value)={

　　ctx.commit(名称，值)

　　}

　　})

　　名称是由我们的业务逻辑定义的状态值。setName是我们在页面中调用的操作函数名。突变中的功能是改变状态4.页面中使用vuex的逻辑。

　　脚本设置

　　从“vue”导入{ ref，computed }

　　从“@/store/index”导入$store

　　//通过存储区中的名称值获取计算的属性

　　const name=computed(()=$ store . state . name)

　　const count=ref(0)

　　const handleVuex=async ()={

　　count.value=1

　　//向存储区提交一个新值，并在操作中调用setName函数

　　await $store.dispatch(setName ， new-value count.value)

　　}

　　/脚本

　　模板

　　差异

　　p{{ name }}/p

　　button type= button @ click= handle vuex vuex/button

　　/div

　　/模板

　　影响

　　对于初学者来说，vuex可能是高级用法，但是通过这篇文章，相信会改变你的想法。

　　我只提供了一种使用vuex的方法，但也差不多。让我们学会使用它。

vue3.x之vite初体验

　　Vite使用

一、项目搭建

　　项目名称是项目名称。

　　$ npm init vite-app项目名称

　　$ cd project-name //输入项目目录

　　$ npm install //安装项目所需的依赖项

　　$ npm运行开发//启动项目

二、附项目结构

三、附项目启动成功图

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

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录