【寒假自学之路】Vuex的学习笔记

什么是Vuex

用于共享、管理状态（数据）的插件

State

vuex中的“唯一数据源”

const {
    mapState } from 'vuex';
store = new Vuex.Strore({
   
    state:{
   
        num:0,
    }
});
app = new Vue({
   
    el:"#app",
    store:store,
    data:{
   
        // 获取方法1： 直接获取
        num:this.$store.state.num;
    }
    computed:{
   
        // 获取方式2：利用映射
    	...mapState({
   
    		theNum:state=>state.num,
		})
    	// 将state中的num映射到组件中，命名为theNum；可以通过直接调用theNum获取Num的值
	}
})

Getter

对state中的数据，进行操作。类似于vue中的computed

const {
    mapGetters } from 'vuex';
store = new Vuex.Strore({
   
    state:{
   
        num:0,
    },
    getters:{
   
        getNum:(state,getters)=>{
   	//第一个参数用于获取状态，第二个参数用于调用其他getters方法
            return "store中的数据num为："+ state.num;
        }
    }
});
app = new Vue({
   
    el:"#app",
    store:store,
    data:{
   
        // 获取方法1： 直接获取
        num:this.$store.getters.getNum,	// “store中的数据num为：0”
    }
    computed:{
   
        // 获取方式2：利用映射
    	...mapGetters({
   
    		theNum:state=>state.num,
		})
    	// 将getter中的getNum映射到组件中，命名为theNum；可以通过直接调用theNum获取字符串的值
	}
})

Mutation

用于同步修改“状态”。类似于事件，需要提交事件之后，会得到一定响应。

const {
    mapGetters } from 'vuex';
store = new Vuex.Strore({
   
    state:{
   
        num:0,