Vue中UI组件库之Vuex与虚拟服务器初识(4)

MonthView.vue月视图早已完善。

二、UI组件库

饿了么UI：http://element-cn.eleme.io/

iviewUI ：https://www.iviewui.com/

2.1饿了么UI

以饿了么UI为例

安装依赖：

npm install --save element-ui

在main.js中配置eleUI组件：

在引入 Element 时，可以传入一个全局配置对象。该对象目前仅支持 size 字段，用于改变组件的默认尺寸。按照引入 Element 的方式，具体操作如下：

import Vue from "vue";
import App from "./App.vue";
import ElementUI from 'element-ui';
//import 'element-ui/lib/theme-chalk/index.css'; //样式在index.html页面引入
// Vue.use(ElementUI);
Vue.use(ElementUI, { size: 'small' });

new Vue({
 el : "#app" ,
 render: (h) => h(App)
});

然后就可以在.vue组件中直接使用了。

2.2 iviewui

npm install iview --save

三、传统数据管理的问题

以下是一个表示“单向数据流”理念的极简示意：

当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状态。

来自不同视图的行为需要变更同一状态。

对于问题1：传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

对于问题2：我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

之前我们做的日历组件将数据放到了App.vue最大父组件上，并且还有:year、:month、：setYear、:setMonth等一系列的参数传递操作。

但是vuex就是将数据放到了全局store中。

不用vuex也能做项目，只不过数据管理起来很不方便。

四、Vuex4.1 Vuex配置

官网：https://vuex.vuejs.org/zh-cn/

安装vuex：