In the previous chapter, we introduced entry. Js of the statistics module, which defines routes and corresponding view pages. Logic can be written in view according to data, created, computed and so on defined by vue. js module.

In this chapter, we introduce the following:

  • How do I use Components to load modules
  • How do I use Echarts to present data, and how do I call plug-ins like Echarts
  • How to introduce VUEX to manage state

A, vuex

Vuex is a centralized state management architecture designed specifically for vue.js applications. It draws on
Flux 和
Redux“, but simplifies the concept and uses an implementation specifically designed to better leverage the vue.js data response mechanism.

When building a large application, the management of different components, modules, and data can become complex. See introduction:


When we use vue.js on its own, we usually store state inside the component. That is, each component owns a piece of the current application state, and the state of the entire application is scattered around. However, we often need to share portions of state with multiple components. A common solution is to use a custom event system where a component puts states
send“To other components. The problem with this pattern is that the flow of events in a large component tree can quickly become cumbersome, and it can be difficult to debug to figure out what went wrong.

Here we get straight to business, here we install vuex and vuE-Resource (get data from API) :

$ cnpm install vuex vue-reource --save
Copy the code

Create folder _store under the statistics directory and create three files:

  • store.js
  • getters.js
  • actions.js

Getters is a method of getting data from a store, so it’s pretty simple:

// getters.js // This getter returns the value of count // in ES6 you can write:  // export const getCount = state => state.count // export function getCount (state) { // return state.count // } export  const getPostsPage = state => state.posts.page export const getPostsList = state => state.posts.list export const getPostsItem = state => state.posts.post export const getChartList = state => state.chart.list export const getChartName  = state => state.chart.name export const getChartData = state => state.chart.dataCopy the code

Of course, actions are as simple as this:

// actions.js // The action will receive store as its first argument // Since we are only interested in the dispatch of the event (the Dispatch object). // Export const incrementCounter = function ({dispatch, const incrementCounter = function ({dispatch, const incrementCounter); state }) { // dispatch('INCREMENT', 1) // } export const nextPage = ({dispatch}) => { dispatch('POSTS_NEXT', 1) } export const prevPage = ({dispatch}) => { dispatch('POSTS_PREV', 1) }Copy the code

A bit more complicated is store, which is introduced as follows:

// store.js import Vue from 'vue' import Vuex from 'vuex' import VueResource from 'vue-resource' import Api from './_api' import ChartList from './_chartList' import ChartData from './_chartData' import ChartSerializer from Use (vuex) vuue. Use (VueResource) // Create an object to store the initial state of the application at startup./ / Note that chart must have, Const state = {posts: {page: 1, list: [{'id': < posts: {page: 1, list: [{'id': 1, 'title': 'cjb', 'content': 'first' }, { 'id': 2, 'title': 'sb', 'content': 'second' }, { 'id': 3, 'title': 'sb pm', 'content': 'third' } ], post: {}, data: null }, chart: { list: ChartList, name: 'pie', data: { tooltip: {}, xAxis: { }, yAxis: {}, series: Const apiQuery = (path, query) => {vue.http. get(Api[path].url, {params: query }).then((res) => { // success callback state.chart.data = ChartSerializer[Api[path].serialize](JSON.parse(res.body)) }, (res) => {// error callback console.log(res)})} // Create an object store for a series of mutation functions we will write next // this is actually corresponding to the various methods in actions const mutations = { POSTS_NEXT (state, offset) { state.posts.page = state.posts.page + offset }, POSTS_PREV (state, offset) { state.posts.page = state.posts.page - offset }, CHART_UPDATE (state, cname, query) { state.chart.name = cname if (cname === 'nano_active' || cname === 'nano_active_map') { apiQuery(cname, query) } else { state.chart.data = ChartData[cname] } } } export default new Vuex.Store({ state, mutations })Copy the code

To put it simply, the Store module is equivalent to this:

store = {} export default { // getters getPost: (id, ops) => { // code return store.posts[id] } // action addPost: (id, ops) => { // code // ajax or something else store.posts.push(...) }}Copy the code

Of course, its core is a kind of state management ideas and implementation method, like the above simple and crude method as far as possible do not use ~


Second, use Echarts to present data

@import ".. /_less/v2/base"; @import ".. /_less/component/animation"; .pikaday { overflow: auto; padding: 1em; .mui-textfield { margin-left: 16px; }}Copy the code

Now the data is displayed. Oh, and notice that the nano and data are from Vuex:


Copy the code

By the way, those of you who are careful will have noticed the chart module used here, which actually looks like this:

@import '.. /.. /_less/v2/base'; @import '.. /.. /_less/component/animation'; .echart { padding: 1em 0; width: 100%; height: 100%; min-height: 700px; }Copy the code

As shown above, data can be passed into chart prop and chart updates automatically when data is updated. Of course, again, the V-Echarts are actually a cache and we are registered with Entry.js:

// entry.js import echarts from '.. /_directives/echarts' Vue.directive('echarts', echarts)Copy the code

So, how to use echart, let’s continue to look at vue.js custom directive method:

export default {
  deep: true,
  params: [],
  paramWatchers: {
  },
  bind: function () {
  },
  update: function (val, oldVal) {
  },
  unbind: function () {
  }
}
Copy the code

So, here’s how it loads:

Import echarts from 'echarts' // in the bind method // this.el is the corresponding element, and other events are not described here.  this.instance = echarts.init(this.el)Copy the code

The full and simple usage is:

import Vue from 'vue' import echarts from 'echarts' import chinaJson from './echarts/china.json' echarts.registerMap('china', chinaJson) export default { deep: true, params: [], paramWatchers: { }, bind: function () { var _this = this Vue.nextTick(function () { // init echarts instance // console.error('bind') _this.instance = echarts.init(_this.el) }) }, update: function (val, OldVal) {var _this = this var options = val ue. NextTick (function () {// console.error('update') Otherwise, when there are multiple charts, Dispose () _this.instance.dispose() _this.instance = echarts.init(_this.el) _this.instance.setoption (options)})}, unbind: function () { var _this = this // console.error('unbind') _this.instance.dispose() } }Copy the code

It’s easy to add a Chart to the components object, like this:

export default {
  name: 'ChartView',
  components: {
    Chart
  }
}

Copy the code

Vue -resource = vue-resource = vue-resource = vue-resource




Reference:

  • vue-loader.vuejs.org/
  • router.vuejs.org/
  • https://github.com/panteng/vue-echarts

  • vuex.vuejs.org/

  • https://github.com/vuejs/vue-resource/