Vuex是一个专为Vue.js设计的状态管理库,适用于多组件共享状态的场景。Vuex能集中式的存储和维护所有组件的状态,并提供相关规则保证状态的独立性、正确性和可预测性,这不仅让调试变得可追踪,还让代码变得更结构化且易维护。本文所使用的Vuex,其版本是3.1.1。

一、基本用法

  首先需要引入Vue和Vuex两个库,如果像下面这样在Vue之后引入Vuex,那么Vuex会自动调用Vue.use()方法注册其自身;但如果以模块的方式引用,那么就得显式地调用Vue.use()。注意,因为Vuex依赖Promise,所以对于那些不支持Promise的浏览器,要使用Vuex的话,得引入相关的polyfill库,例如es6-promise。

<script src="js/vue.js"></script>
<script src="js/vuex.js"></script>

  然后创建Vuex应用的核心:Store(仓库)。它是一个容器,保存着大量的响应式状态(State),并且这些状态不能直接修改,需要显式地将修改请求提交到Mutation(变更)中才能实现更新,因为这样便于追踪每个状态的变化。在下面的示例中,初始化了一个digit状态,并在mutations选项中添加了两个可将其修改的方法。

const store = new Vuex.Store({
state: {
digit: 0
},
mutations: {
add: state => state.digit++,
minus: state => state.digit--
}
});

  接着创建根实例,并将store实例注入,从而让整个应用都能读写其中的状态,在组件中可通过$store属性访问到它,如下所示,以计算属性的方式读取digit状态,并通过调用commit()方法来修改该状态。

var vm = new Vue({
el: "#container",
store: store,
computed: {
digit() {
return this.$store.state.digit;
}
},
methods: {
add() {
this.$store.commit("add");
},
minus() {
this.$store.commit("minus");
}
}
});

  最后将根实例中的方法分别注册到两个按钮的点击事件中,如下所示,每当点击这两个按钮时,状态就会更新,并在页面中显示。

<div id="container">
<p>{{digit}}</p>
<button @click="add">增加</button>
<button @click="minus">减少</button>
</div>

二、主要组成

  Vuex的主要组成除了上一节提到的Store、State和Mutation之外,还包括Getter和Action,本节会对其中的四个做重点讲解,它们之间的关系如图2所示。

图2  四者的关系

1)State

  State是一个可存储状态的对象,在应用的任何位置都能被访问到,并且作为单一数据源(Single Source Of Truth)而存在。

  当组件需要读取大量状态时,一个个的声明成计算属性会显得过于繁琐而冗余,于是Vuex提供了一个名为mapState()的辅助函数,用来将状态自动映射成计算属性,它的参数既可以是数组,也可以是对象。

  当计算属性的名称与状态名称相同,并且不需要做额外处理时,可将名称组成一个字符串数组传递给mapState()函数,在组件中可按原名调用,如下所示。

var vm = new Vue({
computed: Vuex.mapState([ "digit" ])
});

  当计算属性的名称与状态名称不同,或者计算属性读取的是需要处理的状态时,可将一个对象传递给mapState()函数,其键就是计算属性的名称,而其值既可以是函数,也可以是字符串,如下代码所示。如果是函数,那么它的第一个参数是state,即状态对象;如果是字符串,那么就是从state中指定一个状态作为计算属性。

var vm = new Vue({
computed: Vuex.mapState({
digit: state => state.digit,
alias: "digit" //相当于state => state.digit
})
});

  因为mapState()函数返回的是一个对象,所以当组件内已经包含计算属性时,可以对其应用扩展运算符(...)来进行合并,如下所示,这是一种极为简洁的写法。

var vm = new Vue({
computed: {
name() {},
...Vuex.mapState([ "digit" ])
}
});

2)Getter

  Getter是从State中派生出的状态,当多个组件要对同一个状态进行相同的处理时,就需要将状态转移到Getter中,以免产生重复的冗余代码。

  Getter相当于Store的计算属性,它能接收两个参数,第一个是state对象,第二个是可选的getters对象,该参数能让不同的Getter之间相互访问。Getter的返回值会被缓存,并且只有当依赖值发生变化时才会被重新计算。不过当返回值是函数时,其结果就不会被缓存,如下所示,其中caculate返回的是个数字,而sum返回的是个函数。

const store = new Vuex.Store({
state: {
digit: 0
},
getters: {
caculate: state => {
return state.digit + 2;
},
sum: state => right => {
return state.digit + right;
}
}
});

  在组件内可通过this.$store.getters访问到Getter中的数据,如下所示,读取了上一个示例中的两个Getter。

var vm = new Vue({
methods: {
add() {
this.$store.getters.caculate;
this.$store.getters.sum(1);
}
}
});

  Getter也有一个辅助函数,用来将Getter自动映射为组件的计算属性,名字叫mapGetters(),其参数也是数组或对象。但与之前的mapState()不同,当参数是对象时,其值不能是函数,只能是字符串,如下所示,为了对比两种写法,声明了两个computed选项。

var vm = new Vue({
computed: Vuex.mapGetters([ "caculate" ]),
computed: Vuex.mapGetters({
alias: "caculate"
})
});

3)Mutation

  更改状态的唯一途径是提交Mutation,Vuex中的Mutation类似于事件,也包含一个类型和回调函数,在函数体中可进行状态更改的逻辑,并且它能接收两个参数,第一个是state对象,第二个是可选的附加数据,叫载荷(Payload)。下面这个Mutation的类型是“interval”,接收了两个参数。

const store = new Vuex.Store({
state: {
digit: 0
},
mutations: {
interval: (state, payload) => state.digit += payload.number
}
});

  在组件中不能直接调用Mutation的回调函数,得通过this.$store.commit()方法触发更新,如下所示,采用了两种提交方式,第一种是传递type参数,第二种是传递包含type属性的对象。

var vm = new Vue({
methods: {
interval() {
this.$store.commit("interval", { number: 2 }); //第一种
this.$store.commit({ type: "interval", number: 2 }); //第二种
}
}
});

  当多人协作时,Mutation的类型适合写成常量,这样更容易维护,也能减少冲突。

const INTERVAL = "interval";

  Mutation有一个名为mapMutations()的辅助函数,其写法和mapState()相同,它能将Mutation自动映射为组件的方法,如下所示。

var vm = new Vue({
methods: Vuex.mapMutations(["interval"])
//相当于
methods: {
interval(payload) {
this.$store.commit(INTERVAL, payload);
}
}
});

  注意,为了能追踪状态的变更,Mutation只支持同步的更新,如果要异步,那么得使用Action。

4)Action

  Action类似于Mutation,但不同的是它可以包含异步操作,并且只能用来通知Mutation,不会直接更新状态。Action的回调函数能接收两个参数,第一个是与Store实例具有相同属性和方法的context对象(注意,不是Store实例本身),第二个是可选的附加数据,如下所示,调用commit()方法提交了一个Mutation。

const store = new Vuex.Store({
actions: {
interval(context, payload) {
context.commit("interval", payload);
}
}
});

  在组件中能通过this.$store.dispatch()方法分发Action,如下所示,与commit()方法一样,它也有两种提交方式。

var vm = new Vue({
methods: {
interval() {
this.$store.dispatch("interval", { number: 2 }); //第一种
this.$store.dispatch({type: "interval", number: 2}); //第二种
}
}
});

  注意,由于dispatch()方法返回的是一个Promise对象,因此它能以一种更优雅的方式来处理异步操作,如下所示。

var vm = new Vue({
methods: {
interval() {
this.$store.dispatch("interval", { number: 2 }).then(() => {
console.log("success");
});
}
}
});

  Action有一个名为mapActions()的辅助函数,其写法和mapState()相同,它能将Action自动映射为组件的方法,如下所示。

var vm = new Vue({
methods: Vuex.mapActions([ "interval" ])
});

三、模块

  当应用越来越大时,为了避免Store变得过于臃肿,有必要将其拆分到一个个的模块(Module)中。每个模块就是一个对象,包含属于自己的State、Getter、Mutation和Action,甚至还能嵌套其它模块。

1)局部状态

  对于模块内部的Getter和Mutation,它们接收的第一个参数是模块的局部状态,而Getter的第三个参数rootState和Action的context.rootState属性可访问根节点状态(即全局状态),如下所示。

const moduleA = {
state: { digit: 0 },
mutations: {
add: state => state.digit++
},
getters: {
caculate: (state, getter, rootState) => {
return state.digit + 2;
}
},
actions: {
interval(context, payload) {
context.commit("add", payload);
}
}
};

2)命名空间

  默认情况下,只有在访问State时需要带命名空间,而Getter、Mutation和Action的调用方式不变。将之前的moduleA模块注册到Store实例中,如下所示,modules选项的值是一个子模块对象,其键是模块名称。

const store = new Vuex.Store({
modules: {
a: moduleA
}
});

  如果要访问模块中的digit状态,那么可以像下面这样写。

store.state.a.digit;

  当模块的namespaced属性为true时,它的Getter、Mutation和Action也会带命名空间,在使用时,需要添加命名空间前缀,如下代码所示,此举大大提升了模块的封装性和复用性。

const moduleA = {
namespaced: true
};
var vm = new Vue({
el: "#container",
store: store,
methods: {
add() {
this.$store.commit("a/add");
},
caculate() {
this.$store.getters["a/caculate"];
}
}
});

  如果要在带命名空间的模块中提交全局的Mutation或分发全局的Action,那么只要将{root: true}作为第三个参数传给commit()或dispatch()就可实现,如下所示。

var vm = new Vue({
methods: {
add() {
this.$store.dispatch("add", null, { root: true });
this.$store.commit("add", null, { root: true });
}
}
});

  如果要在带命名空间的模块中注册全局的Action,那么需要将其修改成对象的形式,然后添加root属性并设为true,再将Action原先的定义转移到handler()函数中,如下所示。

const moduleA = {
actions: {
interval: {
root: true,
handler(context, payload) {}
}
}
};

3)辅助函数

  当使用mapState()、mapGetters()、mapMutations()和mapActions()四个辅助函数对带命名空间的模块做映射时,需要显式的包含命名空间,如下所示。

var vm = new Vue({
computed: Vuex.mapState({
digit: state => state.a.digit
}),
methods: Vuex.mapMutations({
add: "a/add"
})
});

  这四个辅助函数的第一个参数都是可选的,用于绑定命名空间,可简化映射过程,如下所示。

var vm = new Vue({
computed: Vuex.mapState("a", {
digit: state => state.digit
}),
methods: Vuex.mapMutations("a", {
add: "add"
})
});

  Vuex还提供了另一个辅助函数createNamespacedHelpers(),可创建绑定命名空间的辅助函数,如下所示。

const { mapState, mapMutations } = Vuex.createNamespacedHelpers("a");

四、动态注册

  在创建Store实例后,可通过registerModule()方法动态注册模块,如下代码所示,调用了两次registerModule()方法,第一次注册了模块“a”,第二次注册了嵌套模块“a/b”。

const store = new Vuex.Store();
store.registerModule("a", moduleA);
store.registerModule(["a", "b"], moduleAB);

  通过store.state.a和store.state.a.b可访问模块的局部状态。如果要卸载动态注册的模块,那么可以通过unregisterModule()方法实现。

  registerModule()方法的第三个参数是可选的配置对象,当preserveState属性的值为true时(如下所示),在注册模块时会忽略模块中的状态,即无法在store中读取模块中的状态。

store.registerModule("a", moduleA, { preserveState: true });

五、表单处理

  表单默认能直接修改组件的状态,但是在Vuex中,状态只能由Mutation触发更新。为了能更好的追踪状态的变化,也为了能更符合Vuex的思维,需要让表单控件与状态绑定在一起,并通过input或change事件监听状态更新的行为,如下所示。

<div id="container">
<input :value="digit" @input="add" />
</div>

  然后在Store实例中初始化digit状态,并添加更新状态的Mutation,如下所示。

const store = new Vuex.Store({
state: {
digit: 0
},
mutations: {
add: (state, value) => {
state.digit = value;
}
}
});

  最后在创建根实例时,将digit状态映射成它的计算属性,在事件处理程序add()中调用commit()方法,并将控件的值作为第二个参数传入,如下所示。

var vm = new Vue({
el: "#container",
store: store,
computed: Vuex.mapState(["digit"]),
methods: {
add(e) {
this.$store.commit("add", e.target.value);
}
}
});

  还有一个方法也能实现相同的功能,那就是在控件上使用v-model指令,但需要与带setter的计算属性配合,如下所示(只给出了关键部分的代码)。

<div id="container">
<input v-model="digit" />
</div>
<script>
var vm = new Vue({
computed: {
digit: {
get() {
return this.$store.state.digit;
},
set(value) {
this.$store.commit("add", value);
}
}
}
});
</script>

Vue躬行记(9)——Vuex的更多相关文章

  1. Vue躬行记(3)——样式和表单

    Vue对DOM元素的class和style两个特性做了专门的增强,即对CSS类和内联样式做了一层封装,通过v-bind指令来处理它们,而接收的表达式既可以是简单的字符串.对象或数组,也可以是复杂的计算 ...

  2. Vue躬行记(1)——数据绑定

    Vue.js的核心是通过基于HTML的模板语法声明式地将数据绑定到DOM结构中,即通过模板将数据显示在页面上,如下所示. <div id="container">{{c ...

  3. Vue躬行记(2)——指令

    Vue不仅内置了各类指令,包括条件渲染.事件处理等,还能注册自定义指令. 一.条件渲染 条件渲染的指令包括v-if.v-else.v-else-if和v-show. 1)v-if 该指令的功能和条件语 ...

  4. Vue躬行记(4)——组件

    组件是可复用的Vue实例,拥有属于自己的数据.模板.脚本和样式,可避免繁重的重复性开发.由于组件都是独立的,因此其内部代码不会影响其它组件,但可以包含其它组件,并且相互之间还能通信. 一.注册 在使用 ...

  5. Vue躬行记(5)——组件通信

    组件之间除了保持独立之外,还需要相互通信,本章将介绍几种通信的方式. 一.直接访问 Vue提供了三个实例属性,可直接访问父组件.子组件和根实例,如下所列. (1)$parent:父组件. (2)$ro ...

  6. Vue躬行记(6)——内容分发

    Vue提供了一种内容分发技术,可将父组件中的内容传递给子组件的模板,实现方式参照了Web组件规范草案. 一.插槽 Vue内置了一个<slot>元素,能作为插槽(slot)存在,而插槽内可包 ...

  7. Vue躬行记(7)——渲染函数和JSX

    除了可通过模板创建HTML之外,Vue还提供了渲染函数和JSX,前者的编码自由度很高,后者对于开发过React的人来说会很熟悉.注意,Vue的模板最终都会被编译成渲染函数. 一.渲染函数 虽然在大部分 ...

  8. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  9. ES6躬行记(1)——let和const

    古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查 ...

随机推荐

  1. webshell之一句话木马变形

    什么是一句话木马 一句话木马就是只需要一行代码的木马,短短一行代码,就能做到和大马相当的功能.为了绕过waf的检测,一句话木马出现了无数中变形,但本质是不变的:木马的函数执行了我们发送的命令. 我们如 ...

  2. MOOC python笔记(三) 序列容器:字符串、列表、元组

    容器概念 容器是Python中的重要概念,分为有序与无序. 有序容器也称为序列类型容器,如:字符串.列表. 通用序列容器操作 容器连接+ 加号可以把两个序列连接成一个更大的容器,相加后两个序列的值并不 ...

  3. C#+Selenium抓取百度搜索结果前100网址

    需求 爬取百度搜索某个关键字对应的前一百个网址. 实现方式 VS2017 + Chrome .NET Framework + C# + Selenium(浏览器自动化测试框架) 环境准备 创建控制台应 ...

  4. webpack知识分享

    webpack 4 webpack 四大核心概念: 入口(entry) // 打包入口 输出(output) : 打包后输出的位置配置 loader  : loader 让 webpack 能够去处理 ...

  5. 冷知识: 不会出现OutOfMemoryError的内存区域

    程序计数器(PC) 因为程序计数器只是记录当前线程正在执行的那条字节码指令的地址,即使出现死循环都不会内存溢出

  6. Solr分片机制以及Solrcloud搭建及分片操作

    Solr分片描述 分片是集合的逻辑分区,包含集合中文档的子集,这样集合中的每个文档都正好包含在一个分片中.集合中包含每个文档的分片取决于集合的整体"分片"策略. 当您的集合对于一个 ...

  7. Apache 4.x HttpClient

    public static Map callRequest(String requestUrl, Method method, Map<String, String> data) thro ...

  8. c# winform用sharpGL(OpenGl)解析读取3D模型obj

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11783026.html 自己写了个简单的类读取解析obj模型,使用导入类,然后new个对象,在 ...

  9. Element-ui-安装

    1.node环境安装 1.1.根据自己电脑位数,下载最新版node.js并安装https://nodejs.org/en/ 1.2.下载git并安装https://gitforwindows.org/ ...

  10. java和python对比

    一:解释性和编译型 梳理 编译型:源代码经过编译直接变为二进制的机器语言,每次都可以直接重新运行不需要翻译.典型的就是c语言. 解释性:java和python都是解释型,源代码经过编译变为字节码文件, ...