vue2视频教程系列第二十六节--如何创建store.js

这节课主要跟大家一起学习store.js使用

Store.js的使用,分为以下几个步骤:

1.  引入store.js

Import store from ‘../vuex/store.js’

2.  注册store

3.  在DOM中使用

{{ this.$store.state.count }}

我们知道了如果何将共享库里的数据展示在页面上了,但是如果数据库里的数据不满足我们的需要,我们需要扩展数据的使用怎么办呢?一定要记住一个原则:不要在当前页面修改共享库里的数据,一定要通知store.js,让其对数据进行操作。这样数据才不会乱,才好统一管理。就如同我们在家里放东西,我们用完任何东西要归位,以便下回使用时直接去原来的地方找一样的道理噢!

下面就看下如何去修改数据吧:

首先呢,我们需要在DOM里创建一个button按钮来触发事件

<button class="button" @click="incre">加</button>

接下来呢,我们在方法里去通知store.js,我要修改数据了!我们上一节课已经完成了数据累加的方法。所以呢,我们需要在本页只需通知store.js里的increment就可以了:

methods: {

incre() {

this.$store.commit("increment")

}

}

在这里,我们需要注意的是,是$sotre,而不是直接的store!切记切记!

还需要更正一下上节课出现的问题,store.js里的是mutations,而不是mutation哈,抱歉误倒大家了!

我们改变了count的数据,这个数据每次在点击button时都会+1,那么这个修改后的数据会通知到其它页面吗?

我们再在home.vue里呢使用store.js。再看下页面。无论在about页面添加到几,重新返回home页面时,home里显示的数据都是修改后的数据!共享库就达到了它的目的了—一组数据可以共享给所有的页面使用!

就到这里了,休息休息一会儿吧:)

欢迎关注微信公众号:duzhan99

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 32,220评论 2 89
  • Store.js是什么文件呢,相当于共享库的作用。我们之前在讲非父子关系的时候,曾经创建过一个文件VueEvent...
    独绽2018阅读 3,335评论 0 0
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,099评论 3 119
  • 苦读乐读十廿载, 苦尽甘来永相伴。 昔日功名云烟散, 明日再战破冰山。 千夫朝夕备征战, 万人奔涌独桥边。 指日可...
    南山台子阅读 1,531评论 0 0
  • 好久之前,我为大家推过卡尔维诺的《看不见的城市》,今天推介的,还是卡尔维诺的作品,却与《看不见城市》不同。今天推介...
    可乐宝宝阅读 3,759评论 0 0

友情链接更多精彩内容