vuex新手入门简章

vuex是什么？

 

vuex是一个专门为vue应用程序 开发的一个状态管理模式，采用集中式储存管理所有组件的公共状态。

 

上图虚线包裹的就是 vuex的核心 ， 其中 state 中保存的就是公共状态， 要改变 state 中的状态（属性）， 唯一的办法就是通过 mutations 修改

 

如何引入vuex？

 

下载vuex

npm install vuex --save

在 store/index.js中 安装vuex  并创建实例

 

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);  // 安装vuex

const store = new Vuex.Store({  // 创建vuex实例
    .....
})

export default store  // 导出实例


在main.js中挂载vuex实例

import store from "./store";  // 导入vuex的实例
......


new Vue({
    ......,
    store, // 挂载实例
})

 

在别的组件中使用

 

console.log(this.$store.state)

Vuex中的五大核心：

 

•  state : 相当于所有组件的data ， 里面存放的是要管理的全局状态

state: {
    isActive: false,
}

• getters: 可以把getters看做所有组件的computed属性 

 

getters: {
    addNum() {
        return this.num1 + this.num2
    }
}

----------在组件中 可以在computed 中 使用 ...mapGetters() 来直接使用 getters 中定义的方法/属性

 

import {mapGetters} from "vuex";

.....


computed: {
    // 第一种写法 
    ...mapGetters(['addNum'])

    // 第二种写法
    ...mapGetters({
        bieming: "addNum",
    })
}

• mutations :可以把Mutations看做是所有组件的 methods 属性，里面存在着许多方法 ，这些方法都有两个参数  1. state  2. payload（自定义参数） 

 

mutations: {
    insert(state, payload){
        state.isActive = paload;
    }
}

• actions :actions 和 mutations类似，区别在于 ：

1. action 提交的是mutation ， 而不是直接变更 state 状态
2. action 中可以包含异步操作 ， mutation 中不可以
3. action 中的回调函数第一个参数是context ， 是一个与 store 实例具有相同属性和方法的对象

 

actions: {
    insertAsync(context, payload){
        setTimeout((payload) => {
            context.commit("insert",payload); // commit提交
        }, 3000)
    }
}

• modules : store模块化。当应用变得复杂时，可以将store分划成各个模块，每个模块都对应有自己的 state , mutation , action ,getter , 也可以嵌套子模块