(以下的文章包含个人观点)
什么是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
网友评论