vuex简介
vuex相当于一个浏览器的一个本地存储,不过vuex拥有更复杂的操作,vuex包含了数据定义,数据过滤,数据获取,数据变更等操作,使用vuex调用的数据在数据改变之后可以实时的响应在页面上
vue核心
State
state主要用途是用来存储数据的,每个store的state都是相对唯一的一个数据源
在组件中调用
store.state.count
Getter
getter主要在state的基础上派生一些数据,主要用来过滤数据
Mutation
如果要修改state中的数据时,就要使用到Mutation了,一般结合Action来使用来完成比较复杂的应用
定义:
// ...
mutation: {
addCount(state) {
state.count++;
}
}
使用方法
store.commit('addCount');
当有参数传入时
mutation: {
addCount(state, num) {
state.count += num;
}
}
使用方法
store.commit('addCount', 50);
注:mutation必须是同步函数
Action
Action类似mutation,不过Action主要用来处理比较复杂的逻辑,Action提交的是mutation,而不是直接改变数据,Action可以包含任何异步操作
个人建议---->管理store
使用分页面分功能的方式来定义使用store。例如 首页有很复杂的操作和逻辑。 就在store文件夹中新建一个index的文件夹 文件夹中index.js作为导出store,在 index中再进行分功能,分业务的建立自己的store,最后在index.js中导入。统一导出