終於到了vuex拉!! Day10時有說之後要來研究，沒想到這一天這麼快就到來，那就進入正題吧。

為什麼需要

Vue.js中最小功能單位是「元件」，當網站擴展管理就變得更重要，重複利用要做的得淋漓盡致，且元件與元件之間是可以獨立發展的。

就一般電商來說，當購物車增加一個商品，透過prop和event傳值到父層子層，甚至是曾祖父層!! 需要同步的資料必須透過層層關卡傳遞，當其中一個環節被抽離了，那整個資料可能就會出現問題。元件變得不在是獨立的個體，Vuex也因此誕生，可以解決這些問題。

特性

javaScript有scoped的概念，當要處理跨模組/程式作用域的時候，最簡單的方式就是丟到最外面，也就是全域的window。很方便但也很容易出錯。

vuex提供了一個Store類似倉庫的概念，功能就像window，任何人都可以從裡面取資料，但不同的是存取有相當的規則，所以就可以避免修改全域變數造成錯誤的問題。

此外，從在倉庫的資料具響應式更新特性，只要引入vuex的元件，都能在改變時同步更新到裡面。

1. 單一資料來源 : 資料都是從Store中拿的，在引用的元件中就會是統一的

2. 單向資料流 : 需要修改狀態，完全重新開始走修改的流程。這限制了狀態修改的方式，讓狀態變得可預測，容易除錯。

   

安裝

建立一個新的專案就可以看到Vuex選項，把他勾起來!

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
>(*) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

若是想在已建立專案可以在專案目錄下的中端機執行

vue add vuex@next

沒有vue CLI也可以使用npm或yarn

npm install vuex@next --save
yarn add vuex@next save

還有CDN

<script src="https://unpkg.com/vuex@next"></script>

安裝後就可以看到src之下有個store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

若採用其他安裝方式的話可以自行建立一個stors.js檔案

import { createApp } from 'vue'
import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const app = createApp({ /* your root component */ })

// Install the store instance as a plugin
app.use(store)

參考資料

Vuex的單向資料流
https://www.itread01.com/content/1550424808.html
Getting Started
https://next.vuex.vuejs.org/guide/