美文网首页
Vuex 初步概念

Vuex 初步概念

作者: 钟志弘 | 来源:发表于2017-08-24 10:57 被阅读18次

(以下的文章包含个人观点)

什么是vuex

vuex相当于其他语言中的全局变量(跟PHP的$_GLOBALS相似),vuex通过mutations将全局变量封装,使得对于变量的控制更加的紧凑。

vuex包含了3个概念:
1.state : 我们将全局变量声明在state里面
2.mutations: 我们将改变全局变量的方法声明到 mutations里面
3.commit: 我们通过commit 去调用mutations里面的方法,以改变state的状态。

在使用store环节中,将提到这三个概念的使用。

从上面的三个概念我们可以确定一个流程,也就是我们通过视图中的接口去调用commit去调用mutations,然后mutations改变state的状态,state再将状态返回到视图中。

view->commit->mutations->state->view。

为什么要使用vuex

为了让模块跟模块的通讯更加简单,官方文档提示如果是小项目没有必要使用全局变量, 直接使用bus即可,(bus传送门).我个人对此却有不同的看法, 如果组件数量超过2个,那么使用vuex是很好的选择,对于小模块,就没什么必要了。

使用方法

声明store

vuex的使用需要导入vuex.js,下载地址

首先我们要“申明全局变量”,我们可以通过Vuex.Store方法来注册一个vuex对象,vuex对象称之为store,也就是仓库的意思,下面的示例来自官方文档:
const store = new Vuex.Store({ state:{ count:0 }, mutations:{ increment(state){ state.count++; } } })

上面这个例子注册了一个全局变量的数组store,数组里面包含了一个变量count,如果我们要改变这个变量的值,那么就需要在 mutations 里面定义方法去改变他。

使用store

我们需要将store(也就是我们上面声明的那个全局数组)应用到组件中是非常简单的,我们可以通过组件的计算属性(computed)去返回store中某个变量的值,当然methods也可以返回,但是效率不高。

返回方法:
Vue.component('counter',{ template:'<div>{{count}}</div>', computed:{ count:()=>store.state.count } })
在上面我们注册了一个组件,并声明了一个名为count的computed, 他返回了store 中state的count

先更新到这里官方文档传送门

相关文章

  • Vuex 初步概念

    (以下的文章包含个人观点) 什么是vuex vuex相当于其他语言中的全局变量(跟PHP的$_GLOBALS相似)...

  • vuex 初步理解

    mutations 当执行程序时state突然发生变化成为mutationsmutation的第一个参数是网站的s...

  • Vuex 初步学习

    一、概念 每一个 Vuex 应用的核心就是 store(仓库),它包含着你的应用中大部分的状态 (state)。V...

  • vuex配置

    vuex配置 目录 vuex的五个核心 配置vuex vuex持久化 一、vuex五个核心概念 State 定义状...

  • 配置 vuex 和 vuex 本地持久化

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

  • vuex

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

  • vuex的使用

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

  • VueX状态管理

    ✍目录总览: 一、VueX概念 1. VueX的概念 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模...

  • VueX状态管理

    目录总览: 一、VueX概念 1. VueX的概念 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式...

  • 简述vue状态管理模式之vuex

    了解vuex核心概念请移步 https://vuex.vuejs.org/zh/ 一、初始vuex 1.1 vue...

网友评论

      本文标题:Vuex 初步概念

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