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

数据流