从0开始构建《掘金特别关注》谷歌插件，五千字细说Vue3响应式原理

2023-10-16 11:15:00

引言

在本期酱酱的下午茶中，我们将从头开始构建一个 Chrome 插件——《掘金特别关注》。该插件将允许用户在掘金网站上快速访问他们关注的作者和话题。我们将使用 Vue.js 来构建这个插件，并深入探讨 Vue3 中响应式原理的实现。此外，我们还将讨论几种缓存读写方案的优缺点和选择。

手把手构建掘金特别关注插件

1. 创建项目

首先，我们需要创建一个新的 Chrome 插件项目。我们可以使用 Yeoman 来生成一个脚手架项目：

npm install -g yo generator-chrome-extension
yo chrome-extension

2. 添加依赖项

接下来，我们需要安装一些依赖项：

npm install vue vue-router vuex axios

3. 编写代码

现在，我们可以开始编写代码了。首先，我们需要创建一个 Vue 实例：

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

接下来，我们需要定义路由：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/authors',
      component: Authors
    },
    {
      path: '/topics',
      component: Topics
    }
  ]
})

最后，我们需要定义存储：

const store = new Vuex.Store({
  state: {
    authors: [],
    topics: []
  },
  getters: {
    getAuthors: state => state.authors,
    getTopics: state => state.topics
  },
  mutations: {
    setAuthors: (state, authors) => {
      state.authors = authors
    },
    setTopics: (state, topics) => {
      state.topics = topics
    }
  },
  actions: {
    fetchAuthors: ({ commit }) => {
      axios.get('https://掘金.com/api/authors')
        .then(response => {
          commit('setAuthors', response.data)
        })
        .catch(error => {
          console.log(error)
        })
    },
    fetchTopics: ({ commit }) => {
      axios.get('https://掘金.com/api/topics')
        .then(response => {
          commit('setTopics', response.data)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
})