Vuex辅助函数

在前一章写的程序中调用代码比较繁琐，调用方法：姓名：{ {$store.state.username}}。我们可以利用辅助函数简化代码。

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1>姓名：{
    
    {
    
    $store.state.username}}</h1>
    <h1>年龄：{
    
    {
    
    $store.state.age}}</h1>
    <h2>虚岁:{
    
    {
    
    $store.getters.xuAge}}</h2> //原始调用方法
    <button @click="addAge"> 添加</button> 

    <h1>姓名：{
    
    {
    
    username}}</h1> //辅助函数调用方法
    <h1>年龄：{
    
    {
    
    age}}</h1>
    <h2>虚岁: {
    
    {
    
    xuAge}}</h2>

    <ul>
      <li v-for="(item,i) in list" :key="i">
          <h3>{
    
    {
    
    item.name}}</h3>
          <p>{
    
    {
    
    item.text}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import {
    
     mapState,mapGetters, mapActions, mapMutations } from 'vuex'

export default{
    
    
  mounted(){
    
    
      console.log(this); 
      //触发vuex的action方法
      // this.$store.dispatch('getJoke')
      this.getJoke()
    },
    methods:{
    
    
      // addAge:function(){
    
    
      //   this.$store.commit('addAge', 3)
      // }
      ...mapActions(['getJoke']),
      ...mapMutations(['addAge','getList'])
    },
    computed:{
    
    
      ...mapState(['username','age','list']), //结构mapState,结构state中的参数
      ...mapGetters(['xuAge'])
    }
}
</script>