vuex 使用教程

2018-09-10  本文已影响0人  霸道的黑猫

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

上一篇 下一篇

猜你喜欢

热点阅读