Vue3中使用vuex4的实现示例
更新时间：2022年06月22日 09:30:55 作者：龙雨LongYu12
本文主要介绍了Vue3中使用vuex4的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
1、引入依赖：
npm i vuex
2、新建文件夹 store ，在里面新建文件 index.js
3、index.js文件内容：
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})4、在 main.js 中引入
import store from './store'
5、使用
在 store/index.js 的 state 中添加 count: 0
在任一组件文件中：加入下面代码：
import { useStore } from "vuex";
export default {
name: "App",
setup() {
// Vue3 有个 composition api 的入口
const store = useStore();// 获取容器
},
};
获取到容器 store 后 ，获取 Vuex 中的 count 的值，通过 store.state.count 来获取。
直接在 template 中使用，目前可以使用旧版本写法
如果想要字段 count 改变后，页面显示数据也改变，需要引入 vue 的计算属性 computed
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<h1>Vuex</h1>
<h1>{{ count }}</h1>
</template>
<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
name: "App",
setup() {
// Vue3 有个 composition api 的入口
const store = useStore(); // 获取容器
// 获取 Vuex 中的 count 的值
console.log("store.state.count", store.state.count);
return {
count: computed(() => store.state.count),
};
},
};
</script>
6、修改 count 的值
这个和在 vue2 中的写法一样
在 store/index.js 中添加下面代码：
mutations: {
add(state, payload) {
state.count += payload
}
},在 要修改 count 的值的组件中通过 commit 来修改
store.commit('add', 3)
到此这篇关于Vue3中使用vuex4的实现示例的文章就介绍到这了,更多相关Vue3使用vuex4内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了mint-ui如何自定义messageBox样式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
v-for循环中使用require/import关键字引入本地图片的几种方式
在做项目的过程中,模版相同,可是不标题和图片不同,循环标题我们知道可以用v-for循环,可是该怎么引入本地图片呢？下面这篇文章主要给大家介绍了v-for循环中使用require/import关键字引入本地图片的几种方式,需要的朋友可以参考下2021-09-09
在本篇文章里小编给大家整理的是关于Vue组件通信中非父子组件传值知识点总结，有兴趣的朋友们学习下。2019-12-12
使用强大的Vuetify开发前端页面,结果发现官方没有提供简便的全局消息通知组件,所以自己动手写了一个简单的组件,接下来通过本文给大家介绍使用vuetify实现全局v-alert消息通知的详细代码,感兴趣的朋友跟随小编一起看看吧2024-02-02
在vue中如果把所有的代码都写到一个页面中,有时比较难找,显得比较复杂,下面这篇文章主要给大家介绍了关于VUE项目中引入JS文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了实现Vue的markdown文档可以在线运行的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了Vue 全部生命周期组件梳理整理，在创建组件之前使用；在实例初始化之后,进行数据侦听和事件，侦听器的配置之前同步调用2022-06-06
在前后端的开发中总是难免会遇到前后端的跨域问题,下面这篇文章主要给大家介绍了关于vue2中vue.config.js简单配置代理跨域的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一key属性,下面这篇文章主要给大家介绍了关于Vue深入理解之v-for中key的真正作用,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vue-jsonp的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
最新评论