vuex 使用教程

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中导入。统一导出

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。