Vue中使用Vuex的store存储数据

Vuex中的 State

1、State提供唯一的公共数据源，所有的共享的数据都要统一放在Store中的State中进行存储

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

2、组件访问State中数据：

1. 第一种方式this.$store.state.全局数据名称

	<template>
	    <div class="hello">
	    <!-- 在template中  this可以省略   -->
	    <h1>{{ $store.state.count }}</h1>
	  	</div>
 	 </template>

2. 第二种方式 从 vuex中按需导入mapState 函数

	// 从 vuex中按需导入mapState 函数
	<script>
	
	import  {mapState} from 'vuex'
 	export default {
		data(){
		return{}
		},
		computed:{
			...mapState(['count'])
		}
   }

	</script>

如何使用 mapState， 直接使用

<template>
	<div>
		<h3>获取全局变量的值： {{ count }}  </h3>
  	</div>
</template>

Vuex中的 Mutation

1、Mutation 用于变更Store中的数据

• 只能通过Mutation 变更Store数据，不可以直接操作Store中的数据
• 通过这种方式可以集中监控所有数据变化

2、如何创建Mutation

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

    // state 中存放的就是全局共享的数据
    state:{
        count:0
    },
    // Mutation 用户变更Store数据
    mutations:{
        add(state){
            state.count++
        }
    }


});

export default store

3、如何触发 mutation

1. 使用$store.commit() 触发

export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    data(){
        return{
            HelloString: "Hello world IOT Know You !"
        }
    },
    methods:{
        handelAdd(){
            // 触发mutation
            this.$store.commit('add');
        }
    }
}

• 创建带参数的Mutation

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

    // state 中存放的就是全局共享的数据
    state:{
        count:0
    },
    // Mutation 用户变更Store数据
    mutations:{
        add(state){
            state.count++
        }，
        addN(state , step){
			state.count += step
		}
    }


});

export default store

• 触发mutation

export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    data(){
        return{
            HelloString: "Hello world IOT Know You !"
        }
    },
    methods:{
        handelAdd(){
            // 触发mutation
            this.$store.commit('add');
        },
        handelAddN(){
            // 触发mutation , 带参数
            this.$store.commit('addN',3);
        },

    }
}

2. 使用mapMutations函数触发

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

导入mapMutations函数后，将需要的mutations函数，映射为当前组件的methods方法

methods:{
	...mapMutations(['add','addN'])
}

完成后，就可以像调组件方法一样直接调用

注意事项
在mutations中不可以写异步的方法

下面的写法是不对的

mutations:{
	add(state){
		setTimeout(() => {
			state.count ++ 
		} , 1000)
	}
}

Vuex中的 Action

1、Action 是专门用于处理异步任务的
如需要通过异步操作变更数据，必须通过Action，不可以使用Mutation
使用Action改变数据时，还是会通过触发Mutation的方式间接变更数据

2、 使用 $store.dispatch()触发actions
定义Actions

actions:{
        addAsync(context){
            // 只有mutations中定义的方法才可以修改 state 
            setTimeout(()=>{context.commit('add')},1000)
        }
    }

触发Action

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

定义带参数的Action

actions:{
        addAsync(context , step){
            // 只有mutations中定义的方法才可以修改 state 
            setTimeout(()=>{context.commit('addN',step)},1000)
        }
    }

触发Action

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

3、使用 mapActions([’’])函数调用Actions

// 从vuex中导入 mapActions 函数
import { mapActions } from 'vuex'

// 将需要的actions函数映射到当前的组件
methods:{
	...mapActions(['add','addN'])
}

Vuex中的 Getter

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

• Getter可以对Store中的数据加工处理之后形成新的数据
• Store中的数据发生变化，Getter中的数据也会发生改变

定义Getter

getters:{
        showNum: state => {return 'Store中count的数值是：'+state.count}
    }

2、调用Getter

• 使用 $store.getters.名称 调用

this.$store.getters.add

• 按需导入 mapGetters 函数调用

// 按需导入mapGetters 
import {mapGetters} from 'vuex'

computed:{
	...mapGetters(['add'])
}