Vuethis.$store詳解

一、什麼是Vuethis.$store

Vuethis.$store是Vue.js提供的狀態管理模式，它可以讓我們在Vue.js應用中進行集中式狀態管理。Vuex將狀態抽取出來，單獨管理，以便於實現數據共享和數據維護。

二、Vuethis.$store的使用場景

Vuex通常用於大型單頁面應用（SPA），其中數據流比較複雜而且數據量比較大的應用。對於一些簡單的應用，單獨使用Vuethis.$store可能會使得應用過度複雜。

三、Vuethis.$store的核心概念

1、state

state是Vuethis.$store的數據中心，即包含多個屬性的對象。

state: {
    count: 0
}

2、mutation

mutation是Vuethis.$store中用於修改state的唯一途徑，它類似於事件，每個mutation都有一個字元串類型的事件類型和一個回調函數。

mutations: {
    increment(state) {
        state.count++
    }
}

3、getter

getter與state類似，也是一個函數，它用於獲取某些狀態的值並做出響應操作。

getters: {
    getCount: state => {
        return state.count
    }
}

4、action

actions是用於處理非同步操作的方法。其傳遞給mutations的是mutation的payload。

actions: {
    incrementAsync({ commit }, payload) {
        setTimeout(() => {
            commit('increment', payload)
        }, 1000)
    }
}

四、Vuethis.$store的使用方法

1、安裝Vuex

使用npm安裝Vuex或者直接引入CDN都可以。

npm install vuex --save

2、創建一個store

在Vue.js應用的入口文件（main.js）中引入Vue和Vuex並實例化store。

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations:{
        increment (state) {
            state.count++
        }
    },
    getters: {
        getCount: state => {
            return state.count
        }
    },
    actions: {
        incrementAsync({ commit }, payload) {
            setTimeout(() => {
                commit('increment', payload)
            }, 1000)
        }
    }
})

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

3、Vuethis.$store的使用

在具體的Vue組件中訪問Vuethis.$store可以用$store屬性。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button v-on:click="add">增加</button>
  </div>
</template>

<script>
export default {
    name: 'About',
    computed: {
        count () {
            return this.$store.getters.getCount
        }
    },
    methods: {
        add () {
            this.$store.commit('increment')
        }
    }
}
</script>

五、Vuethis.$store的使用案例

下面是一個根據GitHub API獲取GitHub用戶信息並展示的案例。

1、Vuex store.js

import axios from 'axios'

export default new Vuex.Store({
  state: {
    user: null,
    repositories: [],
    followers: [],
    following: [],
    loading: false,
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setRepositories(state, repos) {
      state.repositories = repos
    },
    setFollowers(state, followers) {
      state.followers = followers
    },
    setFollowing(state, following) {
      state.following = following
    },
    setLoading(state, loading) {
      state.loading = loading
    },
  },
  actions: {
    async fetchUser({ commit }, username) {
      commit('setLoading', true)
      const { data: user } = await axios.get(`https://api.github.com/users/${username}`)
      commit('setUser', user)
      commit('setLoading', false)
    },
    async fetchRepositories({ commit }, username) {
      commit('setLoading', true)
      const { data: repos } = await axios.get(`https://api.github.com/users/${username}/repos`)
      commit('setRepositories', repos)
      commit('setLoading', false)
    },
    async fetchFollowers({ commit }, username) {
      commit('setLoading', true)
      const { data: followers } = await axios.get(`https://api.github.com/users/${username}/followers`)
      commit('setFollowers', followers)
      commit('setLoading', false)
    },
    async fetchFollowing({ commit }, username) {
      commit('setLoading', true)
      const { data: following } = await axios.get(`https://api.github.com/users/${username}/following`)
      commit('setFollowing', following)
      commit('setLoading', false)
    },
  },
  getters: {
    getUser(state) {
      return state.user
    },
    getRepositories(state) {
      return state.repositories
    },
    getFollowers(state) {
      return state.followers
    },
    getFollowing(state) {
      return state.following
    },
    getLoading(state) {
      return state.loading
    },
  }
})

2、App.vue

<template>
  <div id="app">
    <input type="text" v-model="username" placeholder="GitHub username" />
    <button v-on:click="getUserData">查詢</button>
    <div v-if="loading">Loading...</div>
    <div v-else-if="user">
      <h2>{{ user.login }}</h2>
      <p>{{ user.bio }}</p>
      <p>followers: {{ user.followers }}, following: {{ user.following }}, public repos: {{ user.public_repos }}</p>
    </div>
    <div v-if="loading">Loading...</div>
    <div v-else-if="repositories">
      <h3>Repositories</h3>
      <ul>
        <li v-for="repo in repositories" :key="repo.id">
          <a :href="repo.html_url" target="_blank">{{ repo.full_name }}</a>
        </li>
      </ul>
    </div>
    <div v-if="loading">Loading...</div>
    <div v-else-if="followers">
      <h3>Followers</h3>
      <ul>
        <li v-for="follower in followers" :key="follower.id">
          <a :href="follower.html_url" target="_blank">{{ follower.login }}</a>
        </li>
      </ul>
    </div>
    <div v-if="loading">Loading...</div>
    <div v-else-if="following">
      <h3>Following</h3>
      <ul>
        <li v-for="follow in following" :key="follow.id">
          <a :href="follow.html_url" target="_blank">{{ follow.login }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'App',
  data() {
    return {
      username: ''
    }
  },
  computed: {
    ...mapGetters(['getUser', 'getRepositories', 'getFollowers', 'getFollowing', 'getLoading']),
    user() {
      return this.getUser
    },
    repositories() {
      return this.getRepositories
    },
    followers() {
      return this.getFollowers
    },
    following() {
      return this.getFollowing
    },
    loading() {
      return this.getLoading
    },
  },
  methods: {
    ...mapActions(['fetchUser', 'fetchRepositories', 'fetchFollowers', 'fetchFollowing']),
    async getUserData() {
      this.$store.commit('setUser', null)
      this.$store.commit('setRepositories', [])
      this.$store.commit('setFollowers', [])
      this.$store.commit('setFollowing', [])

      const username = this.username
      await Promise.all([
        this.fetchUser(username),
        this.fetchRepositories(username),
        this.fetchFollowers(username),
        this.fetchFollowing(username)
      ])
    }
  }
}
</script>