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

数据流