美文网首页
13.vuex (实现数据共享)

13.vuex (实现数据共享)

作者: nora_wang | 来源:发表于2019-06-25 11:42 被阅读0次

1.介绍
vuex 被称为一种“状态管理模式”,这个状态管理应用包含一下部分:
1.state 驱动应用的数据源(需进行共享的数据)。
2.view 以申明方式将state映射到视图上。
3.actives 响应在view上的用户输入导致的状态(数据)变化。(即用户所执行的操作)。

状态管理有5个核心,分别是state、getter、mutation、action以及module。

基于我们应用但是各种会遇到多个组件数据的共享状态,单向数据流的简洁性就会受到破坏。(data中的数据发生改变时,相应组件中所用到的相关数据也会发生相对于的改变。),如需解决此问题,可以用vuex来解决。

什么情况下我应该使用 Vuex?
Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
<u>如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。</u>确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 [store 模式]就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

2.安装

npm install vuex --save

在main.js(全局)当中引入vuex,并use到项目中,再创建一个store仓库。

import Vuex from 'vuex'
Vue.use(Vuex)

//创建一个store仓库
const store = new Vuex.Store({
    state:{
      count:10
    }
})

创建好之后别忘记将store注入到vue实例当中。

接下来就能直接在每个组件当用获取到你在store中添加的共享数据了。

<p>{{ this.$store.state.count }}</p>

相关文章

  • 13.vuex (实现数据共享)

    1.介绍vuex 被称为一种“状态管理模式”,这个状态管理应用包含一下部分:1.state 驱动应用的数据源(...

  • iOS 数据共享 - 黏贴版

    数据共享 黏贴版 复制黏贴模式实现数据分享 URLType 路由模式跳转实现数据分享 [图片上传失败...(ima...

  • 66_数据建模实战_基于共享锁和排他锁实现悲观锁并发控制

    66_数据建模实战_基于共享锁和排他锁实现悲观锁并发控制 1、共享锁和排他锁的说明 共享锁:这份数据是共享的,然后...

  • vuex

    官方推荐的数据框架:在vue的开发中 vue实现视图层的开发,vuex来实现数据层,实现数据共享 vuex是整个虚...

  • 内容提供器简介

    内容提供器是Android中实现跨程序共享数据的标准方式,内容提供器主要用于在不同的应用程序之间实现数据共享的功能...

  • Hadoop的目标

    提供一个可靠的共享存储和数据分析系统: 1. HDFS实现数据的存储; 2. MapReduce 实现数据...

  • localStorage、sessionStorage

    localStorage、sessionStorage localStorage:同源下数据共享(可进行监听值实现...

  • Vue扩展

    VueX HTTP是无状态的,跨页面的数据无法共享,但Vue是单页面应用,VueX可以实现数据共享; VueX的更...

  • CentOS7安装部署NFS共享服务器

    应用环境:需要部署多台Web服务器,迁移网站数据,使用NFS实现数据共享 1)部署NFS共享服务器 拓展:no_r...

  • 头条抖音3面题:网络编程Socket+GC Roots+数据同步

    一面: hashmap,怎么扩容,怎么处理数据冲突?怎么高效率的实现数据迁移? Linux的共享内存如何实现,大概...

网友评论

      本文标题:13.vuex (实现数据共享)

      本文链接:https://www.haomeiwen.com/subject/rixtcctx.html