Vuex之結構

wade3po發表於2019-02-02
Vue

之前整理了vuex的使用場景，現在開始學習學習怎麼使用。我會根據官網api來重新學習一遍。

首先我們要安裝vuex：

Npm install vuex –save

官網推薦的vuex結構：

├── main.js

├── components

│ ├── App.vue

│ └── ...

└── store

├── index.js          # 我們組裝模組並匯出 store 的地方

├── actions.js        # 根級別的 action

├── mutations.js      # 根級別的 mutation

└── modules

    ├── cart.js       # 購物車模組

    └── products.js   # 產品模組
複製程式碼

個人是比較喜歡這樣：

├── main.js

├── components

│ ├── App.vue

│ └── ...

└── vuex

├── store.js          # 我們組裝模組並匯出 store 的地方

├── actions.js        # 根級別的 action

├── mutations.js      # 根級別的 mutation

└── modules

    ├── cart.js       # 購物車模組

    └── products.js   # 產品模組
複製程式碼

分模組我們先不管，所以直接建成的目錄結構：

Vuex之結構
Vuex 使用單一狀態樹，用一個物件就包含了全部的應用層級狀態。這也意味著，每個應用將僅僅包含一個 store 例項。

Store.js裡面：

import Vuex from 'vuex'
import Vue from 'vue'
import mutation from './mutation'
import actions from './actions'
import getter from './getter'
Vue.use(Vuex)const state = {  
score: [50, 90, 40, 80, 65, 99, 30, 87]
    
}
export default new Vuex.Store({  state,  getter,  actions,  mutation})

複製程式碼

然後在main.js裡面引入並使用：

Vuex之結構
這樣，我們就搭建出了vuex最簡單可以使用的結構了。

歡迎關注Coding個人筆記 公眾號

相關文章