vuex学习笔记

Vuex概述

Vuex是什么

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享（使用store对全局对象进行管理）
组件之间共享数据的方式

父向子传值：v-bind 属性绑定

子向父传值：v-on 事件绑定

兄弟组件之间共享数据：EventBus

• $on：接收数据的那个组件
• $emit：发送数据的那个组件

使用Vuex进行统一管理的好处

1. 能够在vuex中集中管理共享的数据，易于开发和后期维护
2. 能够高效地实现组件之间的数据共享，提高开发效率
3. 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。

什么样的数据适合存储到Vuex中

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中，对于组件中的私有数据，依旧存储在组件自身的data中。

Vuex的核心概念

State

State提供唯一的公共数据源，所有共享的数据都要统一放到store的state中进行存储

const store = new Vuex.Store({
    state:{count:0}
})

组件访问State中数据的第一种方式：

this.$store.state.全局数据名称

组件访问State中的数据的第二种方式：

//1.从vuex中按需导入mapState函数
import {mapStatus} from 'vuex'

通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性

computed:{
    ...mapState(['count'])
}

Mutation

Mutation用于变更Store中的数据。

1. 只能通过mutation变更Store数据，不可以直接操作Store中的数据
2. 通过这种方式虽然操作起来繁琐一点，但是可以集中监控所有数据的变化

//定义Mutation
const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        add(state){
            state.count++
        }
    }
})

//触发mutation
methods:{
    handle1(){
        this.$store.commit('add')
    }
}

Mutation传递参数

//定义Mutation
const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        add(state,step){
            state.count += step
        }
    }
})

//触发mutation
methods:{
    handle1(){
        this.$store.commit('add',3)
    }
}

触发Mutations的第二种方式

//1.从vuex中按需导入mapMutations函数
import {mapMutations} from 'vuex'

//2.将指定的mutations函数，映射为当前组件的methods函数
methods:{
    ...mapMutations(['add','addN'])
}

不要在Mutations函数中执行异步操作，例如计时器操作

Action

Action用于处理异步任务

如果通过异步操作变更数据，必须通过Action，而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据。

//定义Action
const store = new Vuex.Store({
    mutations:{
        add(state){
            state.count++
        }
    },
    actions:{
        addAsync(context){
            setTimeout(()=>{
                context.commit('add')
            },1000)
        }
    }
})


//触发Action
methods:{
    handle(){
        this.$store.dispatch('addAsync')
    }
}

触发actions异步任务时携带参数：

//定义Action
const store = new Vuex.Store({
    mutations:{
        add(state,step){
            state.count += step
        }
    },
    actions:{
        addAsync(context,step){
            setTimeout(()=>{
                context.commit('add',step)
            },1000)
        }
    }
})


//触发Action
methods:{
    handle(){
        this.$store.dispatch('addAsync',5)
    }
}

触发Actions的第二种方式

//1.从vuex中按需导入mapActions函数
import {mapActions} from 'vuex'
//2.指定的actions函数，映射为当前组件的methods函数
methods:{
    ...mapActions(['addAsync','addNAsync'])
}

Getter

Getter用于对Store中的数据进行加工处理形成的新的数据。

1. Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
2. Store中数据发生变化，Getter的数据也会跟着变化

//定于Getter
const store = new Vuex.Store({
    state:{
        count:0
    },
    getters:{
        showNum:state=>{
            return '当前最新的数量是'+state.count
        }
    }
})

getter的使用方法

//使用getters的第一种方式：
this.$store.getters.名称
//使用getters的第二种方式:
computed:{
    ...mapGetters(['showNum'])
}

实例

通过axios请求数据并将数据存储在store中

export default new Vuex.Store({
    state:{
        list:[]
    },
    mutations:{
        initList(state,list){
            state.list = list;
        }
    },
    actions:{
        getList(context){
            axios.get('/list.json').then((data))=>{
                console.log(data);
                context.commit('initList',data)
            }
        }
    }
})