美文网首页
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 初步概念

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