Vuex学习总结（二）

使用mapState，mapGetters，mapMutations，mapActions

在上期中我们学会了简单的使用store来操作Vuex
下面我们将使用mapState，mapGetters，mapMutations，mapActions来跟好的获取Vuex中的数据和方法

//store 文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
//多设置一些共用的数据用于下面演示
export default new Vuex.Store({
  state: {
  	duan:"",
  	zhang:"张",
  	li:"李"
  },
  mutations: {
  	SETDUAN(state,value){
		state.duan = vlue
	},
	SETLI(state,value){
		state.zhang = value	
	}
  },
  actions: {
  	setDuan(context,value){
  		if(value.indexOf('段') === 0){//用于体现该对象中用于处理复杂逻辑
  			context.commit("SETDUAN",value)
		}	
  	}
  },
  modules: {
  }
})

//引入mapState,mapGetters,mapMutations,mapActions
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
    export default {
        name:'Count',
        data(){
            return{
               
            }
        },
        computed:{
            //借助mapState生成计算属性，从state中读取数据（对象写法）
            //...mapState({duan:"duan",zhang:"zhang",li:"li"})
            //借助mapState生成计算属性，从state中读取数据（数组写法）
            //...mapState(["duan","zhang","li"])
        },
        methods:{
        //对象格式（数组格式同mapState）
            ...mapMutations({SETDUAN:"SETDUAN",SETDUAN:"SETDUAN"}),
            ...mapActions({setDuan:"setDuan",setLi:"setLi"})
        }
    }
</script>