巧用Vue.js+Vuex制作专门收藏微信公众号的app

/*** crawler-server.js ***/

'use strict'
const http = require('http')
const url = require('url')
const util = require('util')
const superagent = require('superagent')
const cheerio = require('cheerio')

const onRequest = (req, res) => {
 // CORS options
 res.writeHead(200, {'Content-Type': 'text/plain', 'Access-Control-Allow-Origin': '*'})
 let keyWord = encodeURI(url.parse(req.url, true).query.query)
 // recieve keyword from the client side and use it to make requests
 if (keyWord) {
 let resultArr = []
 superagent.get('http://weixin.sogou.com/weixin?type=1&query=' + keyWord + '&ie=utf8&_sug_=n&_sug_type_=').end((err, response) => {
 if (err) console.log(err)
 let $ = cheerio.load(response.text)

 $('.mt7 .wx-rb').each((index, item) => {
 // define an object and update it
 // then push to the result array
 let resultObj = {
  title: '',
  wxNum: '',
  link: '',
  pic: '',
 }

 resultObj.title = $(item).find('h3').text()
 resultObj.wxNum = $(item).find('label').text()
 resultObj.link = $(item).attr('href')
 resultObj.pic = $(item).find('img').attr('src')
 resultArr.push(resultObj)
 })
 
 res.write(JSON.stringify(resultArr))
 res.end()
 })
 }
}

http.createServer(onRequest).listen(process.env.PORT || 8090)
console.log('Server Start!')

/*** store.js ***/

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
 collectItems: [],
 searchResult: {}
}

localStorage.getItem("collectItems")?
 state.collectItems = localStorage.getItem("collectItems").split(','):
 false

const mutations = {
 SET_RESULT (state, result) {
 state.searchResult = result
 },
 COLLECT_IT (state, name) {
 state.collectItems.push(name)
 localStorage.setItem("collectItems", state.collectItems)
 },
 DELETE_COLLECTION (state, name) {
 state.collectItems.splice(state.collectItems.indexOf(name), 1)
 localStorage.setItem("collectItems", state.collectItems)
 }
}

export default new Vuex.Store({
 state,
 mutations
})

/*** SearchBar.vue ***/


vuex: {
 getters: {
 collectItem(state) {
 return state.collectItems
 }
 },
 actions: {
 deleteCollection: ({ dispatch }, name) => {
 dispatch('DELETE_COLLECTION', name)
 },
 searchFun: ({ dispatch }, keyword) => {
 $.get('http://localhost:8090', { query: keyword }, (data) => {
 dispatch('SET_RESULT', JSON.parse(data))
 })
 }
 }
}

/*** SearchResult.vue ***/

vuex: {
 getters: {
 wordValue(state) {
 return state.keyword
 },
 collectItems(state) {
 return state.collectItems
 },
 searchResult(state) {
 return state.searchResult
 }
 },
 actions: {
 collectIt: ({ dispatch }, name, collectArr) => {
 for(let item of collectArr) {
 if(item == name) return false
 }
 dispatch('COLLECT_IT', name)
 }
 }
}