Vuex day07

1.安装Vuex

npm i vuex --save

2.Vuex环境的搭建

import Vue from "vue"

import Vuex from "vuex"

Vue.use(Vuex)

const store = new Vuex.store({

})

new Vue({store})

3.传递数据

this.$store.state.state数据

this.$store.getters.getters数据  getters相当于组件内部的计算属性

4.修改数据

this.$store.commit("mutation数据")  同步修改

this.$store.dispatch("actions"数据)  异步修改

5.mutation载荷 & actions载荷

数据单一 直接传

数据较多 传对象

6.组件的优化 Vuex辅助函数

import {mapState,mapGetters,mapMutations,mapActions} from "vuex"

    mapState(["count"]) 返回值:        
    {            
        count(){                
            return this.$store.state.count            
        }        
    }    

    mapState({myCount:"count"}) 返回值:        
    {                
        myCount(){                
            return this.$store.state.count            
        }        
    }  

    mapMutations(["add"]) 返回值:  
        {
            add(obj){
                this.$store.commit("add",obj)
            }
        } 
    mapMutations({myAdd:"add"}) 返回值:  
        {
            myAdd(obj){
                this.$store.commit("add",obj)
            }
        }