从前文的架构图可以知道，所有的数据流通都是通过 vuex 进行，通过上面的文档了解了有关 vuex 的用法以后，我们进入 /vuex 文件夹来构建核心的 store.js 代码：
/*** 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 })
下面我们将对当中的代码重点分析。
首先我们定义了一个 state 对象，里面的两个属性对应着收藏夹内容，搜索结果。换句话说，整个APP的数据就是存放在 state 对象里，随取随用。
接着，我们再定义一个 mutations 对象。我们可以把 mutations 理解为“用于改变 state 状态的一系列方法”。在 vuex 的概念里， state 仅能通过 mutation 修改，这样的好处是能够更直观清晰地集中管理应用的状态，而不是把数据扔得到处都是。
通过代码不难看出，三个 mutation 的作用分别是：
SET_RESULT ：把搜索结果存入 state
COLLECT_IT ：添加到收藏夹操作（包括 localstorage ）
DELETE_IT ：从收藏夹移除操作（包括 localstorage ）
组件数据处理
我们的APP一共有两个组件， SearchBar.vue 和 SearchResult.vue ，分别对应着搜索部分组件和结果部分组件。其中搜索部分组件包含着收藏夹部分，所以也可以理解为有三个部分。
搜索部分组件 SearchBar.vue
/*** 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)) }) } } }
代码有点长，这里仅重点介绍 vuex 部分，完整代码可以参考 项目 。
getters 获取 store 当中的数据作予组件使用。
actions 的两个方法负责把数据分发到 store 中供 mutation 使用。
看官方的例子，在组件中向 action 传参似乎很复杂，其实完全可以通过 methods 来处理参数，在触发 actions 的同时把参数传进去。
结果部分组件 SearchResult.vue
/*** 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) } } }
结果部分主要在于展示，需要触发 action 的地方仅仅是添加到收藏夹这一操作。需要注意的地方是应当避免重复添加，所以使用了 for...of 循环，当数组中已有当前元素的时候就不再添加了。
尾声
关键的逻辑部分代码分析完毕，这个APP也就这么一回事儿，UI部分就不细说了，看看项目源码或者你自己DIY就可以。至于打包成APP，首先你要下载HBuilder，然后通过它直接打包就可以了，配套使用 mui 能够体验更好的效果，不知道为什么那么多人黑它。
搜狗提供的API很强大，但是提醒一下，千万不要操作太过频繁，不然你的IP会被它封掉，我的已经被封了……
Weex 已经出来了，通过它可以构建Native应用，想想也是激动啊，待心血来潮就把本文的项目做成 Weex 版本的玩玩……
本文已被整理到了《Vue.js前端组件学习教程》，《JavaScript微信开发技巧汇总》，欢迎大家学习阅读。
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。