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

下面我来详细讲解“巧用Vue.js+Vuex制作专门收藏微信公众号的app”的完整攻略。

1. 搭建Vue.js项目

首先需要搭建一个基于Vue.js的项目。可以使用Vue CLI来快速生成一个基础项目，命令如下：

vue create wechat-collect

这个命令会创建一个名为wechat-collect的项目，并自动添加Vue.js所需要的基础配置和依赖库。

2. 使用Vuex来管理数据

Vuex是Vue.js的状态管理库，用于解决不同组件之间共享数据的问题。在我们的微信公众号收藏app中，需要将收藏的公众号列表存储在一个全局的状态中，因此需要使用Vuex来管理数据。

首先需要安装Vuex，命令如下：

npm install vuex --save

然后需要在Vue.js中引用Vuex，并定义一个全局的store，用于存储公众号列表：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    collectedAccounts: []
  },
  mutations: {
    collectAccount(state, account) {
      state.collectedAccounts.push(account)
    },
    removeAccount(state, account) {
      const index = state.collectedAccounts.indexOf(account)
      state.collectedAccounts.splice(index, 1)
    }
  }
})

这个store中，有一个状态collectedAccounts用于存储收藏的公众号列表，还定义了两个mutations用于添加和删除公众号。

3. 开发收藏公众号页面

在我们的微信公众号收藏app中，需要一个页面来展示收藏的公众号列表，并提供添加和删除公众号的功能。我们可以使用Vue.js的单文件组件来开发这个页面。

示例代码：

<template>
  <div class="account-list">
    <ul>
      <li v-for="account in collectedAccounts" :key="account">
        {{ account }}
        <button @click="removeAccount(account)">删除</button>
      </li>
    </ul>
    <div>
      <input type="text" v-model="newAccount">
      <button @click="collectAccount(newAccount)">添加</button>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    collectedAccounts() {
      return this.$store.state.collectedAccounts
    }
  },
  data() {
    return {
      newAccount: ''
    }
  },
  methods: {
    collectAccount(account) {
      this.$store.commit('collectAccount', account)
      this.newAccount = ''
    },
    removeAccount(account) {
      this.$store.commit('removeAccount', account)
    }
  }
}
</script>

这个页面会展示收藏的公众号列表，并提供添加和删除公众号的功能。其中，使用了Vuex的状态和mutations来管理公众号列表。

4. 添加路由

在我们的微信公众号收藏app中，需要一个路由来将收藏公众号页面和其他页面联系起来。这可以使用Vue.js的路由库vue-router来实现。

首先需要安装vue-router，命令如下：

npm install vue-router --save

然后需要在Vue.js中引用vue-router，并定义一个路由：

import Vue from 'vue'
import Router from 'vue-router'
import AccountList from '@/components/AccountList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'AccountList',
      component: AccountList
    }
  ]
})

这个路由定义了一个名为AccountList的路由，访问路径为/，对应的组件是之前我们开发的收藏公众号页面。

5. 整合成一个完整的Vue.js项目

最后，我们需要将之前的各个部分整合成一个完整的Vue.js项目。在src/main.js中引入之前定义的store和router，并在Vue.js的根实例中注册这两个组件：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

这个应用就是一个完整的基于Vue.js和Vuex的微信公众号收藏app了。

示例说明

下面给出两个示例说明：

示例一：添加公众号到收藏列表

假设有一个名为“IT之家”的微信公众号需要添加到收藏列表中，我们可以输入“IT之家”并点击添加按钮，这个公众号就会被添加到收藏列表中。示例代码如下：

1. 打开收藏公众号页面
2. 输入“IT之家”并按下回车键
3. 页面会自动更新，展示新的公众号“IT之家”

示例二：删除收藏公众号

假设收藏列表中已经有了一个名为“知乎日报”的公众号，我们想从收藏列表中删除这个公众号，我们可以点击该公众号对应的“删除”按钮，这个公众号就会从收藏列表中删除。示例代码如下：

1. 打开收藏公众号页面
2. 找到名为“知乎日报”的公众号，点击该公众号对应的“删除”按钮
3. 页面会自动更新，公众号“知乎日报”已不再出现在收藏列表中

以上示例只是简单举例，实际应用中可能还需要更多的功能和交互细节，但这个示例可以作为一个比较基础的应用模板，在此基础上可以进一步扩展和优化。