gettters可以理解為計算屬性

在store.js中

import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex)//訪問狀態對象 const state = {count:1 } const getters = {//vue2.0不要使用箭頭函數,getters主要任務就是對狀態state對象里面的數據，執行計算后輸出count:function(state){return state.count+=100} } export default new Vuex.Store({state,getters })

App.vue文件中

<template><div id="app"><img src="./assets/logo.png"><h1>{{ msg}}</h1><!--訪問狀態對象--><div>{{$store.state.count}}</div><!--getters中獲取到的-->
<p>{{count}}</p></div> </template><script>//vuex提供的輔助函數 import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default {name: 'app',data () {return {msg: 'Welcome to Your Vue.js App'}},computed:{count(){return this.$store.getters.count},// ...mapGetters([//使用mapGetters簡寫// 'count'// ])} } </script><style> #app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; }h1, h2 {font-weight: normal; }ul {list-style-type: none;padding: 0; }li {display: inline-block;margin: 0 10px; }a {color: #42b983; } </style>

?

轉載于:https://www.cnblogs.com/tw6668/p/9107458.html

總結

以上是生活随笔為你收集整理的4.vuex学习之getters、mapGetters的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。