vue3.0使用vuex,vuex 3
本文主要介绍Vue3中vuex4的实现示例，通过示例代码非常详细。对大家的学习或工作都有一定的参考价值。有需要的朋友下面跟边肖学习。
:
目录
1.引入依赖关系：2。创建一个新的文件夹存储，并在其中创建新文件index.js3和index.js。内容：4。在main.js中引入5，使用6，修改count的值。
1、引入依赖：
npm i vuex
2、新建文件夹 store ，在里面新建文件 index.js
3、index.js文件内容：
从“vuex”导入{ createStore }
导出默认的createStore({
状态：{
},
突变：{
},
动作：{
},
模块：{
}
})
4、在 main.js 中引入
从导入存储。/商店
5、使用
store/index.js状态下添加计数：0
在任何组件文件中：添加以下代码：
从“vuex”导入{ use store }；
导出默认值{
名称：“应用程序”，
setup() {
//Vue3有一个组合api的条目。
const store=use store()；//获取容器
},
};
到达容器存储后，获取Vuex中的count值，并通过store.state.count获取它
直接用在模板里，目前可以用老版本。
如果希望页面显示数据在字段计数发生变化后也发生变化，就需要引入vue的calculated属性。
模板
img alt=Vue logo src=。/assets/logo.png /
h1Vuex/h1
h1{{ count }}/h1
/模板
脚本
从“vue”导入{ computed }；
从“vuex”导入{ use store }；
导出默认值{
名称：“应用程序”，
setup() {
//Vue3有一个组合api的条目。
const store=use store()；//获取容器
//获取Vuex中count的值
console.log(store.state.count ，store . state . count)；
返回{
count:computed(()=store . state . count)，
};
},
};
/脚本
6、修改 count 的值
这和vue2的写法一样
在store/index.js中添加以下代码：
突变：{
添加(状态，有效负载){
state.count=有效负载
}
},
在要修改count值的组件中，通过提交来修改它。
store.commit(add ，3)
关于在Vue3中使用vuex4的实现示例的这篇文章到此为止。关于在Vue3中使用vuex4的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。