目录
1.什么是vueX 官网介绍: State | Vuex (vuejs.org)
(4) Getter 用于对Store 中的数据进行加工处理形成新的数据。
1.什么是vueX 官网介绍: State | Vuex (vuejs.org)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。ps:简单来说就是为了解决多组件共享数据问题。
2.vueX包括哪些模块
vueX包括5个模块 State Getter Action mutation Module.
State是用来存放组件之间需要共享的数据。
Getter 用于对state 中的数据进行加工处理形成新的数据。
Action用于处理异步函数。
mutation用于更改State中的数据状态。
Module用于将store分成多个模块。
(1) State存放共享数据(count)
页面页面中有两种使用方法,第一中是直接使用插值语法{{ $store.state.count }}渲染,另一种是使用mapState函数将全局数据count,映射为当前组件的计算属性。
<template>
<div>
//第一种
<h2>当前的值为:{{ $store.state.count }}</h2>
//第二种
<h2>当前的值为:{{ count }}</h2>
</div>
</template>
<script>
// 按需引入mapState函数
import { mapState } from 'vuex'
export default {
data() {
return {
}
},
// 通过刚才导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性
computed:{
...mapState(['count'])
},
}
</script>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 用于存放共享的数据
state: {
count: 0
},
//用于变更state中的数据状态
mutations: {},
// 处理异步函数
actions: {},
// Getter 用于对Store 中的数据进行加工处理形成新的数据。
getters: {},
modules: {}
})
(2) mutation更改State中数据。
mutation两种方法更改State中数据,一种是直接调用,另一种是按需引入将mutation中的函数通过mapMutation函数映射到组件methods中直接调用。
第一种是this.$store.commit('store中muatation定义的函数名',参数)
<template>
<div>
<h2>当前的值为:{{ $store.state.count }}</h2>
<button @click="addBtn">数量+1</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
// mutation用于变更store中的数据
// 只能通过mutation变更Store数据,修改store.state中的值不能直接使用 this.$store.state.count ++
// 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。
addBtn(){
// this.$store.commit(定义的函数名,传递值)
this.$store.commit('addN',2)
}
}
}
</script>
在store中的mutations对象中添加函数
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 用于存放共享的数据
state: {
count: 0
},
//用于变更state中的数据状态
mutations: {
//num是传递过来的参数
addN(state, num) {
state.count += num
},
},
// 处理异步函数
actions: {},
// Getter 用于对Store 中的数据进行加工处理形成新的数据。
getters: {},
modules: {}
})
第二种使用mapMutation将mutation中的函数映射为组件中methods中的一个方法。
<template>
<div>
<h2>当前的值为:{{ count }}</h2>
<button @click="subBtn">数量-1</button>
</div>
</template>
<script>
// 按需引入mapMutations函数
import { mapMutations } from 'vuex'
export default {
data() {
return {
}
},
methods:{
//按需引入 mapMutations函数 将需要的mutations函数,映射为当前组件的 methods方法:
...mapMutations(['sub']),
subBtn(){
//直接传参数不需要再声明函数名
this.sub(3)
}
}
}
</script>
在store中的mutations对象中添加函数
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 用于存放共享的数据
state: {
count: 0
},
//用于变更state中的数据状态
mutations: {
//num是传递过来的参数
sub(state,num) {
state.count -= num
}
},
// 处理异步函数
actions: {},
// Getter 用于对Store 中的数据进行加工处理形成新的数据。
getters: {},
modules: {}
})
(3) Action中执行异步函数。
不要再mutation中执行异步代码,因为会导致页面更新这个改变的值,而state中的值没有改变。所以Action专门用于处理异步函数,但是Action并不是直接执行异步函数,而是要通过dispath方法区调用mutation中的方法从而达到异步更改state中的数据。
例如:
在Action中执行异步函数也有两种方式,一种是直接调用,另一种是和mapMutation差不多的mapAction函数映射。
第一种直接调用:
<template>
<div>
<h2>当前的值为:{{ $store.state.count }}</h2>
<button @click="addBtnAsync">异步数量+1</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
// 异步+1
addBtnAsync(){
// this.$store.commit(定义的函数名,传递值)
this.$store.dispatch('addAsync',5)
}
}
}
</script>
在store中的mutations对象中添加函数
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 用于存放共享的数据
state: {
count: 0
},
//用于变更state中的数据状态
mutations: {
//num是传递过来的参数
add(state, num) {
state.count += num
},
},
// 处理异步函数
actions: {
//num是传递过来的参数
addAsync(context,num) {
setTimeout(() => {
context.commit('add',num)
}, 1000)
},
},
// Getter 用于对Store 中的数据进行加工处理形成新的数据。
getters: {},
modules: {}
})
第二种使用mapAction函数映射
<template>
<div>
<h2>当前的值为:{{ count }}</h2>
<button @click="subBtn">数量-1</button>
</div>
</template>
<script>
// 按需引入mapActions 函数
import { mapActions } from 'vuex'
export default {
data() {
return {
}
},
methods:{
//按需引入 mapActions函数 将需要的mapActions函数,映射为当前组件的 methods方法:
...mapActions(['subAsyncN']),
subBtn(){
//直接传参数不需要再声明函数名
this.subAsyncN(3)
}
}
}
</script>
在store中的mutations对象中添加函数
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 用于存放共享的数据
state: {
count: 0
},
//用于变更state中的数据状态
mutations: {
//num是传递过来的参数
subN(state,num) {
state.count -= num
}
},
// 处理异步函数
actions: {
subAsyncN(context,num) {
setTimeout(() => {
context.commit('subN',num)
}, 1000);
}
},
// Getter 用于对Store 中的数据进行加工处理形成新的数据。
getters: {},
modules: {}
})
(4) Getter 用于对Store 中的数据进行加工处理形成新的数据。
<template>
<div>
<h2>当前的值为:{{ showNum}}</h2>
</div>
</template>
<script>
// 按需引入 mapGetters 函数
import { mapGetters} from 'vuex'
export default {
data() {
return {
}
},
// 通过刚才导入的mapGetters函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性
computed:{
...mapGetters(['showNum'])
},
}
</script>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 用于存放共享的数据
state: {
count: 0
},
//用于变更state中的数据状态
mutations: {},
// 处理异步函数
actions: {},
// Getter 用于对Store 中的数据进行加工处理形成新的数据。
getters: {
showNum(state) {
return 'getters当前最新的值为' + state.count
}
},
modules: {}
})
ps总结:State用于存放数据,Action用于执行异步函数,mutation用于修改state中的数据,Getter加工数处理成新的数据,但是也会随着state中数据的变化二变化 。