vuex笔记

vuex

state： 统一定义公共数据（类似于data(){return {}}）
mutations ： 使用它来修改数据(类似于methods，必须是同步)
getters： 类似于computed(计算属性 )
actions： 发起异步请求
modules： 模块拆分
什么是同步，什么是异步--------举个栗子
例如说一个人边吃饭，边抖腿，边看手机，这就是异步。
吃饭后再抖腿，抖腿后再看手机，这就是同步，同步必须等上一件事执行完成，才执行后面的事情。

获得state中的数据

state 是数据，组件中如果要使用这个数据可以通过 this.$store.state.属性名 的方式获取

(b站听前端–小鑫vuex课程的笔记)

<template>
	<div id="app">
	<button @click="getState">获取state</button>
	{{a}}
	{{getState1}}
	<button @click="getgetteers">获取getteers</button>
	{{b}}
	{{getGetters1}}
	<button @click="setStates">通过mutations修改state的值</button>
	<button @click="changeCount()">通过mapmutations修改state的值</button>
	<button @click="setActions">通过ations修改state的值</button>
</template>

import {mapState,mapGetters,mapMutations} from "vuex"//另外一种方式
export default {
	name:"App",
	components:{},
	computed:{
		...mapState({
			getState1(state){
				return state.count;
			},
		}),
		...mapGetters({
			getGetters1:"gettersState";
		})
	data(){
		return{
			a:0,
			b:0,
		}
	},
	methods:{
		...mapMutations(["changeCount"])
		//获取state中的值
		getState(){
			this.a=this.$store.state.count;
		},
		//获取getters中的值
		getgetteers(){
			this.b=this.$store.getters.gettersState;
		},
		//修改值
		setStates(){
			this.$store.commit("changeCount",2)//2传给mutations中的val
			/**也可以通过对象的方式
				this.store.commit({type:"changeCount",val:2});
				mutation--changeCount中则写为
				state.count=state.count+val.val
			**/
		}
		setActions(){
			this.store.dispath("setchangeCount")
		},
	}
}

store文件夹下的index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//同意公用数据
const state={
	count:1
}
//修改
const mutations={
	// mutation 的第二个参数 val是在 commit mutation 时传入的参数
	changeCount(state，val){
		// state.count++    
		state.count=state.count+val
	}
}
const actions={
	setchangeCount(context){
	context.commit('changeCount')
	}
}
//类似于计算属性
const getters={
	gettersState(){
		return state.count+1
	}
}
const store=new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})
export default store

当然actions也可以通过如图所示的方法传递参数