1. 程式人生 > >VUEX及VUE專案結構粗解

VUEX及VUE專案結構粗解

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            元件

資料流

這裡寫圖片描述

這裡寫圖片描述