每一个vuex的应用的核心都是store(仓库),store基本上就是一个容器,它包含着你的应用中大部分的状态(state),vuex和单纯的全局对象有以下两点不同:

1,vuex的状态存储是响应式的。当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会相应的得到高效更新。

2,你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式的提交(commit)mutations.这样使得我们可以方便的跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好的了解我们的应用。

最简单的 Store

安装 Vuex 之后,让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutations:

const store = new Vuex.Store({

state:{

count:0

},

mutations:{

increment(state){

state.count++

}

}

})

现在,你可以通过store.state来获取状态对象,以及通过store,commit方法触发状态变更

store.commit('icrement')

console.log(store.state.count)

再次强调,我们通过提交mutation的方式,而非直接改变store.state.count,是因为我们想要更明确地追踪到状态变化,这个简单的约定能让你的意图更加明显,这样你在阅读代码的时候能更容易的解读应用内部的状态改变,

vuex 开始的更多相关文章

  1. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  2. vuex复习方案

    这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.

  3. vuex 初体验

    vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...

  4. vuex(1.0版本写法)

    Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/  2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...

  5. 关于Vue vuex vux 文档

    01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex  ----->>状态管理模块儿<<------- https://vuex.vue ...

  6. vuex

    英文:(Introduction)中文:https://github.com/vuejs/vuex/issues/176(贡献者努力中)

  7. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  8. Vue2.X的状态管理vuex记录

    记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method   -- ...

  9. 在vue1.0遇到vuex和v-model的坑

    事情是这样的,在开发项目的过程中我使用了vuex并且在store中定义了一个保存用户信息的对象 userInfo : { 'nickName' : '', // 昵称 'password' :'', ...

  10. vuex 笔记

    Vuex 笔记 一个简单的状态管理 单一数据源: const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const ...

随机推荐

  1. mysql的日志管理

    日志操作是数据库维护中最重要的手段之一,日志文件会记录MySQL服务器的各种信息,所以当MySQL服务器遭到意外损坏时,不仅可以通过日志文件来查看出错的原因,而且还可以通过日志文件进行数据恢复. MY ...

  2. Thinkphp学习笔记1-URL模式

    PATHINFO模式 PATHINFO模式是系统的默认URL模式,提供了最好的SEO支持,系统内部已经做了环境的兼容处理,所以能够支持大多数的主机环境.对应上面的URL模式,PATHINFO模式下面的 ...

  3. HTML+CSS-如何定义让两个div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

  4. (转)行为树(Behavior Tree)

    转自:http://www.cnblogs.com/konlil/archive/2011/04/23/2025954.html 如果要让游戏里的角色或者NPC能执行预设的AI逻辑,最简单的用IF.. ...

  5. [Functional Programming] Async IO Functor

    We will see a peculiar example of a pure function. This function contained a side-effect, but we dub ...

  6. JAVA中split对空串的影响。

    public class SplitEmptyString { /** * @param args */ public static void main(String[] args) { // 空串的 ...

  7. android gallery 自定义边框+幻灯片效果

    最近在项目中用到图片轮播,试了Gallery,ViewFlipper,ViewPager,感觉Gallery最符合需求,但是Gallery的系统边框很难看,项目中要求用自己的背景图片. 下面来看一下使 ...

  8. 使用poll处理任意数目个客户的单进程程序

    将http://www.cnblogs.com/nufangrensheng/p/3590002.html中的select改用poll. int main(int argc, char **argv) ...

  9. Unity WP8开发环境

    Unity WP8开发环境   VS2012旗舰版: 安装WP SDK8.0出错提示: 根据当前系统时钟或签名文件中的时间戳验证时要求的证书不在有效期内 解决办法: 方法一:把操作系统的时间日期调整到 ...

  10. Java程序员的C++回归路(二)

    接前: 之前记录的笔记,终于想起来上传完整. 第7章: 类 定义抽象数据类型 任何对成员对象的访问都可以解释为使用this来访问,即this->member. =default :默认构造函数. ...