三、来简单讲一下vuex的一些比较常用到的4个核心概念:state、getter、mutation、action
(1)state
每个vuex应用的核心就是store(仓库)。说白了,‘store’它就像一个仓库、一个容器,用它来存储应用中的态状(state)。即此,它包含着你的应用中大部分的状态。
下面介绍一下vuex与单纯的全局对象有以下两点不同:
1.vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
2.我们不能直接去改变 store中的状态(改变store中的状态,其实就是改变store中的值)。想要改变store中的状态的唯一途径就是显式地提交(commit)mutation。
接下来,我们去创建一个简单的state
store.js 文件中:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0,
numbers: 99
}
})
export default store;
在各个组件中我们该怎么去访问呢?例如,
HelloWorld.vue:
<template>
<div class="hello">
<button @click="onClick">点击</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
}
},
methods: {
onClick(){
console.log(this.$store.state.count);//我们可以通过this.$store.state来访问
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
(2)getter
vuex允许我们在store中定义'getter'(getter可以认为是store的计算属性),就像计算属性一样,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
下面我们创建一个getter:
getter它会接收state作为第一个参数
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0,
numbers: 99
},
getters: {
doneTodos(state) { 传入的state参数,其就是store中的state,也就是我们存储的状态(state)
return state.count;
}
}
})
export default store;
getter会暴露为store.getters对象,所以我们可以通过它(store.getters)以属性的形式来访问这些值:
<template>
<div class="hello">
<button @click="onClick">点击</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
}
},
methods: {
onClick(){
console.log('mm',this.$store.getters.doneTodos); // 0
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
getter还可以接收其他的getter作为第二个参数:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 10,
numbers: 99
},
getters: {
num(state) {//其他的getter
return state.numbers;
},
doneTodos(state, num) {//接收其他的getter作为第二个参数
return state.count;
}
}
})
export default store;
3.mutation
之前我们说过,不能直接去更改store中的状态,也就是不能直接去更改state中的值,更改vuex的store中的状态的唯一方法就是提交mutation;
vuex中的mutation,它非常类似于事件:每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler),这个回调函数就是我们实际进行状态更改的地方,并且它会接受state作为第一个参数。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 10,
numbers: 99
},
getters: {
num(state) {
return state.numbers;
},
doneTodos(state, num) {
return state.count;
}
},
mutations: {
increment(state) {
state.count ++;
}
}
})
export default store;
现在我们去触发mutation handler,来改变store中的状态,但是我们又不能直接去调用一个mutation handler。这个选项更像是事件注册:‘当触发一个类型为increment的mutation时,调用此函数’,所以,要触发一个mutation handler,你需要以相应的type调用store.commit方法:
<template>
<div class="hello">
<button @click="onClick">点击</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
}
},
methods: {
onClick(){
this.$store.commit('increment');
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
同时mutation除了接收state作为第一个参数外,它还可以额外的参数,
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 10,
numbers: 99
},
getters: {
num(state) {
return state.numbers;
},
doneTodos(state, num) {
return state.count;
}
},
mutations: {
increment(state, m) { //m为传入的第二个参数
state.count += m;
}
}
})
export default store;
怎么去调用呢,其实和之前的一样,同样调用store.commit()方法
<template>
<div class="hello">
<button @click="onClick">点击</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
}
},
methods: {
onClick(){
this.$store.commit('increment',80);//第二个参数80其实就是参数m的值
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
⚠️mutation必须是同步的
4.action
我们知道mutation是同步的,所以在mutation中混合异步调用会导致你的程序很难调试,所以action可以帮助我们处理异步操作。
action类似于mutation,不同在于:
(1)action提交的mutation,而不是直接去改变状态。
(2)action可以包含任意异步操作
下面我们来注册一个简单的action:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 10,
numbers: 99
},
getters: {
num(state) {
return state.numbers;
},
doneTodos(state, num) {
return state.count;
}
},
mutations: {
increment(state, m) {
state.count += m;
}
},
actions: {
textClick(context) {
context.commit('increment');
}
}
})
export default store;
action函数会接受一个与store实例具有相同方法和属性的context对象(并非一定是context,可以是任意参数),context类似于store,你可以把context当作store,但两者还是有区别的。
这样的话你就可以调用context.commit来提交mutation,或者也可以通过context.state和context.getters来获取state和getters。
我们通过前面可以知道,mutation通过store.commit()来触发回调函数,那么action又是通过什么呢?
action通过store.dispatch方法触发:
<template>
<div class="hello">
<button @click="onClick">点击</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
}
},
methods: {
onClick(){
this.$store.dispatch('textClick');
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
先更新到这吧,回头继续补充!!!!