【Vue学习笔记】—— vuex的语法 { }

学习笔记

• 作者：o_Ming

  • vuex

Vuex

++ state ++ （用于存储全局数据）

• 组件访问 state 中的全局数据的方式1：

this.$store.state.全局数据

• 组件访问 state 中的全局数据的方式2：

// 组件中按需导入 mapState 函数
import { mapState } from 'vuex'
export default {
	name: 'app',
	computed: {
		// 将全局数据 映射 为计算属性
		...mapState(['inputValue'])
	},
}

<p>{{ inputValue }}</p>

---

++ mutations ++ （用于变更store存储的数据，不要在mutations中进行异步操作）

• 调用mutations的方式1：

// 在store中定义
mutations: {
	add(state,param1){
		state.count = param1
	}
}
// 在组件中调用
this.$store.commit('add',param1)

• 调用mutations的方式2：

import { mapMutations } from 'vuex'
// 将指定的mutations函数，映射为组件的methods函数
export default{
	methods: {
		...mapMutations(['add']),
		fun(){
			this.add()
		}
	}
}

---

++ getters ++ （用于对Store中的数据加工处理形成新的数据）

• 定义 getters

getters: {
	showNum: state => {
		return '当前最新的数据是: ' + state.count
	}
}

• 使用 getters

  • 方式1：this.$store.getters.名称

  • 方式2：

import { mapGetters } from 'vuex'
export default {
	name: 'app',
	computed: {
		...mapGetters(['showNum'])
	}
}

<p>{{ showNum }}</p>

• getters 和 computed （都可以缓存计算结果）

getters: {
	format(state){
		console.log("getters format 执行")
		return state.txt + " Vuex"
	}
}

<!-- "getters format 执行" 这句话只会执行一次 -->
<h1>{{ this.$store.getters.format }}</h1>
<h1>{{ this.$store.getters.format }}</h1>
<h1>{{ this.$store.getters.format }}</h1>
<h1>{{ this.$store.getters.format }}</h1>
<h1>{{ this.$store.getters.format }}</h1>

computed: {
	format(){
		console.log("computed format 执行")
		return this.msg + " yeap!"
	}
}

<!-- "computed format 执行" 这句话只会执行一次 -->
<h1>{{ this.format }}</h1>
<h1>{{ this.format }}</h1>
<h1>{{ this.format }}</h1>
<h1>{{ this.format }}</h1>
<h1>{{ this.format }}</h1>

---

++ actions ++ （用于执行异步操作）

• 定义

mutations: {
	add(state){
		state.count++
	}
}
actions: {
	addAsync(context){
		setTimeout(() => {
			context.commit('add')
		},1000)
	}
}

• 触发
  • 方式1：this.$store.dispatch('addAsync')
  • 方式2：

import { mapActions } from 'vuex'
export default {
	name: 'app',
	methods: {
		...mapActions(['addAsync']),
		// this.addAsync()
	}
}

<button @click='addAsync'></button>

---

坚持就是胜利！