Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

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

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

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

简单举例

首先得保证安装好vuex,然后在你的vue项目下面建一个store文件夹

/ 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex); const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})

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

store.commit('increment')

console.log(store.state.count) // -> 1

如果想在其他vue文件中使用,得在main.js中注册全局组件

import store from "./store";

new Vue({
'el':'#app',
router,
store
})

然后在其他组件中就可以通过this.$store来获取或者操作store里面的数据了

我们通过提交 mutation 的方式,而非直接改变 store.state.count,是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显,这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外,这样也让我们有机会去实现一些能记录每次状态改变,保存状态快照的调试工具。有了它,我们甚至可以实现如时间穿梭般的调试体验。

由于 store 中的状态是响应式的,在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation

Vuex 基本概念的更多相关文章

  1. Vuex基本概念

    Vuex基本概念 State Getter Mutation Action Module 简单的Store import Vue from 'vue'; import Vuex from 'vuex' ...

  2. 【VUE】8.VUEX核心概念

    1. Vuex核心概念主要如下 state : 存储共享数据 mutation: 变更store中的数据,方法,不能异步操作 action: 异步操作,通过触发mutation变更数据 getter: ...

  3. 4.VUEX到底是什么

    关于vuex类的新闻最近很多,看到眼热就去查了下资料,然后扯出来一堆flux.redux.state.state之类的概念,以及大型工程必要性之类的.看官方手册也是昏昏然. 然而,我还是弄懂了!我准备 ...

  4. vue创建状态管理(vuex的store机制)

    1:为什么说要是永远状态管理 在使用 Vue 框架做单页面应用时,我们时常会遇到传值,组件公用状态的问题.(子父间传值文章传送门) ,如果是简单的应用,兄弟组件之间通信还能使用 eventBus 来作 ...

  5. VueJs(14)---理解Vuex

    理解Vuex 一.Vuex 是什么? 首先我们来分析一种实际开发中用vue.js的场景,你有n个组件,当你改变一个组件数据的时候需要同时改变其它n个组件的数据,那么我想你可能会对 vue 组件之间的通 ...

  6. Vuex详解

    一.什么是Vuex 官网解释如下: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex ...

  7. vuex状态管理之学习笔记

    概述及使用场景 Vuex 是一个主要应用在中大型单页应用的类似于 Flux 的数据管理架构.它主要帮我们更好地组织代码,以及把应用内的的状态保持在可维护.可理解的状态. 但如果是简单的应用 ,就没有必 ...

  8. 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app

    一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 ...

  9. Vuex状态管理详解

    什么是Vuex 专门为vue应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态(数据),以相应的规则保证状态以一种可预测的方式发生改变 Vuex的作用(什么样的情况下使用Vuex) 多 ...

随机推荐

  1. 内存交换空间(swap)的构建

    一.使用物理分区构建swap 1.先进行分区的行为. [root@iZ255cppmtxZ ~]# fdisk /dev/xvdb Welcome to fdisk (util-linux ). Ch ...

  2. 【bzoj1700】Problem Solving 解题 dp

    题目描述 过去的日子里,农夫John的牛没有任何题目. 可是现在他们有题目,有很多的题目. 精确地说,他们有P (1 <= P <= 300) 道题目要做. 他们还离开了农场并且象普通人一 ...

  3. Hadoop——HDFS的构架

    在使用一个工具之前,应该先对它的机制.组成等有深入的了解,以后才会更好的使用它.下面来介绍一下什么是HDFS,以及他的构架是什么样的. 1.什么是HDFS? Hadoop主要是用于进行大数据处理,那么 ...

  4. [CQOI2017]小Q的表格——反演好题

    zhoutb2333的题解 难得一见的新颖反演题. 一眼看可能不是反演题. 修改影响别的,很恶心. 所以考虑化简f的联系式,发现和gcd有关 于是考虑用gcd来表示所有的gcd(a,b)=g的所有f( ...

  5. LOJ 模拟赛

    1.LOJ 507 接竹竿 link dp[i]表示前i个的最大分数,所以dp[i]=max(dp[i-1],dp[j-1]+sum[i]-sum[j-1])   (color i ==color j ...

  6. sed 用法 转https://www.cnblogs.com/Dev0ps/p/8441255.html

    假设文档内容如下: [root@localhost ~]# cat /tmp/input.txt null test 要求:在1111之前添加AAA,方法如下: sed -i 's/指定的字符/要插入 ...

  7. 【Android开发】范例1-绘制Android的机器人

    下面这个实例通过前面学过的Paint.Canvas等2D绘画技术来实现在手机屏幕上绘制Android机器人的小实例. 具体代码实现和效果: 用来显示自定义的绘图类的布局文件 res/layout/ma ...

  8. Codeforces Round #532 (Div. 2):F. Ivan and Burgers(贪心+异或基)

    F. Ivan and Burgers 题目链接:https://codeforces.com/contest/1100/problem/F 题意: 给出n个数,然后有多个询问,每次回答询问所给出的区 ...

  9. bzoj 2086 [Poi2010]Blocks 单调栈

    [Poi2010]Blocks Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 788  Solved: 356[Submit][Status][Dis ...

  10. Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo

    1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...