vuex使用教程以及特性讲解

这篇文章是我总结vuex的一些心得体会，来和大家分享一下，一开始刚接触到vuex我也是模模糊糊的摸不清头脑，官方文档又太过官方，通过一系列的学习总结了下面这些东西，比较白话，希望对大家有用

vuex的核心特性包含 state、mutation、actions、getters
首先说state： state提供唯一的公共数据源，页面里面所有的共享的数据都要放在state里面进行统一的保管
在组件中访问state的方式：
1、this.$store.state, 例如 this.$store.state.aaa
2、mapState函数的方式，项目中建议采用这种方式 首先

import { mapState } from 'vuex'

然后在计算属性钩子内 computed:{ …mapState([‘state中数据’]) }

其次是getters，getters在项目中比较常用，一般我在项目中都是采用getters而不是采用state。可以把它理解成计算属性，主要用于对store中的数据进行加工成新的数据，注意是只会对store数据进行加工处理，当store中的数据发生改变的时候，getter里面的数据也会实时发生变化

sidebar: state => state.app.sidebar,

这种写法参考es6的箭头函数。
在组件中访问的方式
1、this.$store.getters,例如this.$store.getters.bbb
2、mapGetters的方式，项目中建议采用这种方式，用法如state，这里就不重复写了

然后就是比较重要的两个东西了
mutation
mutation主要是用来修改state里面的数据，这里要说明一点，vuex中state的数据只可以通过mutation来进行改变，action是也是通过commit mutation来改变的
使用方式

mutation：{
    add(state, data){
        state.num += data;
        // 第一个参数state，永远都是它，它就是$state对象
        // 第二个参数是调用addNum方法是传递过来的参数
    }
}

那在页面里面如何调用mutation方法去改变state数据呢，
如下:使用commit来调用mutations中对应的函数，第一个参数就是mutations函数的函数名，第二个就是我们要传递过去的参数

<button @click="addNum"></button>

methods:{
    addNum() {
        this.$store.commit("add", 2)
    }
}

同样的，mutations也有第二种方便的调用方式

import {mapMutations} from 'vuex'

methods:{
    ...mapMutations{[
        'add'
    ]}
    
    addNum() {
        this.add(2)
    }
}

mutation只用来处理vuex中的同步操作 ， 如果编写异步操作的话，vue调试器会报错的，那异步操作怎么办呢 就是下面这个了

Action
先来看一段代码关于action的,action通过commit来调用mutation的方法进而改变state数据

actions:{
    addAsync(context,date){
        setTimeout(()=>{
            context.commit('add', date)
        },1000)
    }
}

在页面中
<button @click="addAsync"></button>
addAsync(){
    this.$store.dispatch('addAsync', 2)
}
// 在页面里面通过dispatch分发去调用action，
// 第一个参数是action里面的方法，第二个参数是要传递过去的参数

同样的actions也存在第二种使用方式，推荐使用

import {mapActions} from 'vuex'

methods:{
    ...mapActions{[
        'asyncAdd'
    ]}
    
    addAsync() { // 页面内调用，直接传参
        this.asyncAdd(2)
    }
}

ok，看到这里是不是对vuex的整体特性以及使用有一个具体的概念啦，快赶紧到项目里面是试一试吧