目录
知识不足的地方赶快点击学习呦~~~
Vuex入门(一)—— state,mapState,…mapState对象展开符详解
Vuex入门(二)—— mutations详解
Vuex入门(三)—— getters,getters,…getters对象展开符详解
Vuex入门(四)—— action和…mapActions详解
Vuex入门(五)—— 封装module全网最全详解(带源码)
Vuex入门(六)——mapState, mapGetters, mapMutations, mapActions全网最全详解终结篇(带源码)
Vuex官网:https://vuex.vuejs.org/zh/guide/#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84-store
1.store.js
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库
getters
两个参数state 和 getters
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: { // 类似于 data
from: '中国',
birthplace:'发源地',
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
mutations: { // 类似于计算属性 computed
},
getters:{ // 两个参数state 和 getters
address(state){
// 第一个参数是state
return state.from + '-' + '北京'
},
newAddress(state,getters){
// 第二个参数可以访问getters里面任意定义函数
return state.birthplace + ':' + getters.address
},
doneTodos(state){
return state.todos.filter(todos => todos.done)
},
},
actions: {},
modules: {}
})
2.getter.vue组件getters详解 + 图片
<template>
<div>
<h1>1.getters</h1>
值1:{
{ address }}
<br />
值2:{
{ newAddress }}
<br>
值3:{
{doneTodos}}
<br>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
data:'今天天气很好~'
};
},
computed: {
address() {
return this.$store.getters.address;
},
newAddress() {
return this.$store.getters.newAddress;
},
doneTodos(){
return this.$store.getters.doneTodos;
}
},
};
</script>
如下图
3.mapGetters.vue调用多个getters值,用mapGetters 和 …mapGetters 用起来方便
使用mapState辅助函数,要引入
import { mapGetters } from "vuex";方法
<template>
<div>
<h1>1.mapGetters辅助函数</h1>
值1:{
{ address }}
<br />
值2:{
{ newAddress }}
<br />
值3:{
{ doneTodos }}
<h1>2. ...mapGetters用法,computed注释了看代码,和上面渲染数据一样</h1>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data() {
return {
};
},
computed: mapGetters({
// 这个是小括号()，加括号{}方法不要丢掉,({})
address:'address',//
newAddress:'newAddress',
doneTodos:'doneTodos'
}),
// computed: {
// ...mapGetters(["address", "newAddress", "doneTodos"]), // 第一种写法 address为getters.js里面的函数名, 在div里面直接调用就能显示, 想div命名自定义就可以用第二种方法对象形式
// ...mapGetters({ // 第二种写法 "address": "address", 'XXX':'BBB' XXX代表div自定义名, BBB为getters.js函数名
// "address": "address", //
// "newAddress": "newAddress",
// "doneTodos": "doneTodos",
// }),
// },
};
</script>
如下图
感觉文章好的话记得点个心心和关注，有错的地方麻烦指正一下，多谢！！！