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 组件
数据流