vuex在vite&vue3中的简单使用说明
更新时间：2022年06月29日 09:58:04 作者：小小前端_可笑可笑
这篇文章主要介绍了vuex在vite&vue3中的简单使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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的同学很快就能上手。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了VueJS 组件参数名命名与组件属性转化问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-12-12
这篇文章主要为大家详细介绍了vue分页器组件编写方法，可设置初始当前页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
这篇文章主要为大家详细介绍了vue使用rules实现表单字段验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
在Vue中，computed属性是一种计算属性，它的值是根据其他数据的值动态计算出来的，下面小编主要来和大家聊聊Vue 3的组合式API中如何使用computed属性，感兴趣的小伙伴快跟随小编一起了解一下吧2023-06-06
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
这篇文章主要介绍了vue-cli 脚手架基于Nightwatch的端到端测试环境的过程,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了Vue中input被赋值后,无法再修改编辑的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vant picker 多级联动操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue-cli webpack 快速搭建项目的教程详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了Vue3+Antd实现弹框显示内容并加入复制按钮,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
今天小编就为大家分享一篇VUE:vuex 用户登录信息的数据写入与获取方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论