Vue 3 的新宠：打造你专属的掘金圈子

打造属于你的掘金圈子：用 Vue 3 创建社交分享空间

用掘金 Yum 建立联系

如果你是一位掘金爱好者，热衷于分享和发现技术见解，那么我们为你准备了一份惊喜。受到 Twitter Circle 的启发，我们创建了一个使用 Vue 3 构建的掘金圈子，让你可以尽情展示你的「JYM」（掘金 Yum），并与志同道合的技术达人建立联系。

从构建基础设施开始

要开启我们的掘金之旅，我们需要一个坚实的基础。使用 Vue CLI 或 Vite 快速创建一个 Vue 3 项目。然后，建立一个名为 App.vue 的组件，作为圈子的主视图。

<!-- App.vue -->
<template>
  <div id="jym-circle">
    <h1>我的 JYM</h1>
    <div v-for="user in users">
      <UserCard :user="user" @follow="follow(user)" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import UserCard from './UserCard.vue'
import users from './users.json'

export default {
  components: { UserCard },
  setup() {
    const users = ref(users)

    const follow = (user) => {
      user.followed = true
    }

    return { users, follow }
  }
}
</script>

提取掘金用户数据

下一步是收集掘金用户数据。我们将使用 Vuex 的强大功能，通过 actions 获取数据，并通过 mutations 管理状态。

// store.js
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    users: []
  },
  actions: {
    fetchUsers({ commit }) {
      fetch('https://api.juejin.cn/user/get')
        .then(res => res.json())
        .then(data => commit('setUsers', data.d.user_list))
        .catch(error => console.error(error))
    }
  },
  mutations: {
    setUsers(state, users) {
      state.users = users
    }
  }
})

打造用户界面

有了用户数据，是时候构建用户界面的核心部分——用户卡片了。每个卡片将展示一个用户的头像、姓名、简介和关注按钮。

<!-- UserCard.vue -->
<template>
  <div class="user-card">
    <img :src="user.avatar" alt="头像">
    <div>
      <p>{{ user.name }}</p>
      <p>{{ user.bio }}</p>
      <button @click="follow">关注</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  props: ['user'],
  setup() {
    const followed = ref(false)

    const follow = () => {
      followed.value = true
    }

    return { followed, follow }
  }
}
</script>

实现关注功能

为了让用户可以相互关注，我们在 App.vue 中实现了关注功能。

<!-- App.vue -->
<script>
...
const follow = (user) => {
  user.followed = true

  // 发送请求更新后端数据库
  // ...
}
...
</script>

部署和分享你的圈子

最后一步是部署你的 Vue 3 圈子，让世界看到你的「JYM」。使用 Netlify 或 Vercel 等平台部署你的项目，然后与其他人分享这个链接，让他们探索你的技术洞见。

结论

使用 Vue 3，我们创建了一个功能强大的掘金圈子，让用户能够建立联系、分享见解和探索技术世界。这个圈子不仅是展示你的「JYM」的绝佳方式，也是与志同道合的技术爱好者建立联系的宝贵平台。

常见问题解答

1. 我如何加入掘金圈子？
只需访问部署的 URL 即可访问掘金圈子。

2. 我如何关注其他用户？
点击每个用户卡片上的「关注」按钮即可关注他们。

3. 我如何分享我的「JYM」？
在你的圈子页面上发布你的文章或分享你的见解。

4. 圈子里有哪些可用的功能？
掘金圈子让你可以关注用户、探索他们的「JYM」，并与志同道合的技术爱好者建立联系。

5. 这个圈子与其他社交平台有什么不同？
掘金圈子专门为技术爱好者设计，让他们围绕特定的主题建立社区并分享见解。