Vuex

2020-12-25 3482

一、

Vuex是一个专为vue.js开发的状态管理模式,采用**集中式存储管理**应用的所有组件的状态
tip: 多个组件需要共享的状态放到Vuex

二、

  • 安装
    import Vuex from 'vuex';
  • 创建对象 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    const store = new Vuex.Store({
        // 保存状态
        state: {
            counter: 10
        },
        // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
        mutations: {
            // 执行方法时 默认里面会传递 state参数 
            increment() {

            }        
        },
        actions: {
            // 做异步操作
        }
    })
  • 导出
    export default store
  • 挂载

三、单一状态树

用一个对象就包含了全部的应用层级状态

四、 getters

就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

getters : {
    powerCount(state) {
        return state.counter*state.counter
    },
    getSeniorStudent(state) {
        return state.students.filter(x => x.age >= 20);
    },
    // 此处的第二个参数 默认固定为getters 不可自定义
    getSeniorStudentQuantity(state, getters) {
        return getters.getSeniorStudent.length;
    },
    // 当需要传参时，返回方法
    getStudenEdler() {
        return function (age) {
            return state.students.filter(x >= age);
        }
    }
}

使用：

{{$store.getters.powerCount}}
{{$store.getters.getSeniorStudentQuantity}}
{{$store.getters.getStudenEdler(18)}}

五、

Vuex更新store状态的唯一方式是提交mutation
Mutation包括两部分：

  • 字符串的事件类型(type)
  • 一个回调函数(handler)，该函数的第一个参数是state

eg.
mutation的定义： 

mutations : {
    increment(state) {
        state.count++;
    }
}

通过mutation更新:

this.$store.commit('increment');    //传入事件类型(type)

六、 mutations传参 —— payload

定义： 

mutations: {
    add(state, num) {
        state.count += num;
    }
}

调用： 

increment(num) {
    this.$store.commit('add', num);
}

七、 mutation的提交风格


this.$store.commit({
    type: 'add',
    count: num
     //或者 count
    })

此时传递的参数是对象（payload)

tips: 

mutations: {
    [add](state, num) {
        state.count += num;
    }
}

type 从外文件引入常量

八、mutation响应规则

Vuex的store中的state是响应式的，state数据发生改变时，Vue组件自动更新。
但该属性必须已经在store中初始化 

Vue.set(state.info, 'address', 'China');
Vue.delete();

上述两个方法可做到相应式更新（增加和删除属性）

九、 action

Action用来替代mutation进行异步操作。

eg.1 

actions: {
    // context 相当于store
    asyncAdd(context, payload) {
        // 模拟异步方法
        setTimeout(()=>{
            // add 方法在mutations里面定义的
            context.commit('add', 10);
            console.log(payload);
        }, 1000);

    }
}

// 调用
this.$store.dispatch('asyncAdd','payload data');

eg.2

  • 定义 
actions: {
    asyncUpdateInfo(context, payload) {
        return new Promise((resolve, reject) => {
            setTimeout(()={
                resolve('success data');
            }, 1000)
        })
    }
}
  • 调用 
this.$store
.dispatch('asyncUpdateInfo', 'payload data')
.then(res => {
    console.log(res); // success data
})

十、modules

Vue使用单一状态树，但应用更加复杂时，store会变得臃肿,Vuex允许将store分割成模块（module）, 每个模块拥有自己的state, mutations, actions, getters
eg.1 moduleA 


const moduleA = {
    state: {
        count: 0
    }, 
    actions: {

    },
    mutations:{

    },
    getters: {

    }
}

局部状态通过context.state暴露，根节点状态则为context.rootState

十一、Vuex结构

mutations, actions, getters抽离为单独的js文件
state也可提出去为单独的对象
module抽离为单独的文件夹，里面放不同的module的js文件

查看评论