VUEX核心

store
    一般使用方法
    export default{
        const store = new Vuex.Store({
            state: {
                },
            actions: {
                },
            mutations: {
                },
            getters: {
                },  
            modules: {
                }
        })
    }
 

1.state 定義了應用狀態的資料結構，同樣可以在這裡設定預設的初始狀態。

        定義：
            state: {
              projects: [],
              userProfile: {}
            }
        使用：
            computed: {
                  projects () {
                    return this.$store.state.projects
                  }
                }
            可以通過mapState函式簡化程式碼
 

2.actions 即是定義提交觸發更改資訊的描述，常見的例子有從服務端獲取資料，在資料獲取完成後會呼叫store.commit()來呼叫更改 Store 中的狀態。

        可以在元件中使用dispatch來發出 Actions。
            定義：
                如
                    actions: {
                        LOAD_PROJECT_LIST: function ({ commit }) {
                          axios.get('/secured/projects').then((response) => {
                            commit('SET_PROJECT_LIST', { list: response.data })
                          }, (err) => {
                            console.log(err)
                          })
                        }
                    }


            使用：
                如
                    this.$store.dispatch('LOAD_PROJECT_LIST', {})
 

3.mutations 呼叫 mutations 是唯一允許更新應用狀態的地方。

            定義：
                mutations: {
                    SET_PROJECT_LIST: (state, { list }) => {
                      state.projects = list
                    }
                  }
            使用：一般在action中使用commit('SET_PROJECT_LIST', { list: response.data })

4.getters Getters 允許元件從 Store 中獲取資料

            定義：
                getters: {
                     completedProjects: state => {
                      return state.projects.filter(project => project.completed).length
                     }
                }
                可以使用mapGetters簡化程式碼
            注： 在專案中一般很少在store中定義getters，而是在使用store的地方定義getters，並且可以通過mapGetters。

5.modules 物件允許將單一的 Store 拆分為多個 Store 的同時儲存在單一的狀態樹中。
隨著應用複雜度的增加，這種拆分能夠更好地組織程式碼

VUE專案結構

assets          靜態資源目錄
components      公共元件
router          路由
service         對api請求的統一管理
store           狀態統一管理
view            元件

資料流