vue记录vuex的一些简单使用

首先页面引用：

引用map更加方便使用vuex；
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' 
使用：
computed：{...mapState(['stateA','stateB']),...mapGetters(['stateC','stateD'])}
methods:{...mapMutations(['FUNA','FUNB']),...mapActions(['func','fund'])}

引用后就能直接利用stateA,并且能直接修改this.store.state.stateA=‘xx’;但是一般不建议这么做，在调试的时候无法跟踪值的变化，官方建议用Mutations来改变;
页面引用主要是引用状态，mapstate引用方便
然后就是调用store.js里面的mutations的方法:this.$store.commit('SETLOGIN',params)
调用store.js里面的actions的方法:this.$store.dispatch('SETLOGIN',params)
在store.js里面要分清一下mutation，actions两个，一个是同步，一个是同步异步都行，在方法里面也写出了分别怎么修改state里面的状态值
下面是页面和store.js

<template>
	<div>
		<h1>vuex的一些简单操作页面2</h1>
		<div>数值{{userId}}+{{newuserId}}</div>
		<div :class="{'on':isLogin}">控制isLogin的：{{userName}}</div>
		<button @click="handleM">调用vuex的mutations里面的方法</button>
		<button @click="handleA">调用vuex的actions里面的方法</button>
		<button @click="handleG">调用vuex的mapGetters里面的值</button>
	</div>
</template>
<script>
	import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
	export default {
		data(){
			return {
				num:2,
			}
		},
		computed:{...mapState(['isLogin','userName','userId']),...mapGetters(['newuserId'])},
		methods:{
			...mapMutations(['SETLOGIN']),
			...mapActions(['setlogin']),
			handleM(){
				this.SETLOGIN(!this.isLogin);
				// this.store.state.isLogin=true;这种不建议用
				//this.$store.commit('SETLOGIN',!this.isLogin) 两种方法都行，这个不需要引用mapMutations
			},
			handleA(){
				this.setlogin(!this.isLogin);
				//this.$store.dispatch('setlogin',!this.isLogin) 两种方法都行，这个不需要引用mapActions
			},
			handleG(){
				this.$store.commit('ADDUSERID')
			}
			
		}
	}
</script>

const state = {
	isLogin:false,
	//个人信息
	userName:"xxx",
	userId:1,
	
}
const mutations = {
	SETLOGIN(state,n){
		state.isLogin = n;
	},
	ADDUSERID(state){
		state.userId += 1;
	}
}
const getters = {
    newuserId:(state)=>{
        return state.userId+100;
    },
}
const actions = {
	setlogin(context,n){
		context.commit('SETLOGIN',n)
	},
}