Vuex-demo

最新推荐文章于 2023-01-09 16:01:40 发布

两年不用下次再用不知道什么时候的账号

最新推荐文章于 2023-01-09 16:01:40 发布

阅读量433

点赞数

CC 4.0 BY-SA版权

分类专栏： Vuex 文章标签： vue Vuex

本文链接：https://blog.csdn.net/wuqiongqiong_/article/details/76861213

Vuex 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用Vue和Vuex实现组件间数据共享的例子。通过创建一个简单的Vue应用并利用Vuex进行状态管理，展示了如何定义共享状态并在组件中访问这些状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">


</head>
<body>

<div id="app">

</div>
<script src='vue.js'></script>
<script src='vuex.js'></script>
<template>
<span v-test='$store.state.msg'></span>
</template>
<script>
Vue.component('test',{
template:'#test'
})
</script>
<script>
var store=new Vuex.Store({
state:{
msg:'今天星期一'
},//希望组件之间共享的数据
getters:{},
mutations:{},//如果想改state里面的值，通过mutations更改。里面放的都是方法
actions:{}
//actions也能修改state里面的值区别：调用方法不同 mutations用commit actions用dispatch 参数不同：mutations用state actions用context 是否异步：mutations不能异步 actions既能异步也能同步
});
var vm=new Vue({
el:'#app',
store:store,//后面的为变量名前面为固定的键名
});
</script>
</body>
</html>