1. 定义:

  1. getters是属于vuex中的一部分,是state的计算属性
  3. 在这里我们在vuex中定义getters来优化是否登录这个功能:
  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. import { setItem, getItem } from '@/utils/storage.js'
  4. Vue.use(Vuex)
  6. export default new Vuex.Store({
  7.   // 保存公共数据
  8.   state: {
  9.     tokenInfo: {
  10.       token: initTokenObj.token || '',
  11.       refresh_token: initTokenObj.refresh_token || ''
  12.     }
  13.   },
  15.   // 相当于组件中的computed
  16.   getters: {
  17.     isLogin (state) {
  18.       // !!XXXX  == 把XXXX转成bool值
  19.       return !!state.tokenInfo.token
  20.       // if (state.tokenInfo.token) {
  21.       //   return true
  22.       // } else {
  23.       //   return false
  24.       // }
  25.     }
  26.   },
  27. })

这里有一个帅气的代码:

!!xxx == 把xxx 转成布尔值

  1.    在这里 一个感叹号是fasle,两个感叹号就是true 所以就是有token的意思<br />                  ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624446359623-7db4004c-9608-4beb-9910-5e427cd82e47.png#clientId=ubcc1bb54-dd04-4&from=paste&height=251&id=u18a0aee7&margin=%5Bobject%20Object%5D&name=image.png&originHeight=251&originWidth=376&originalType=binary&ratio=1&size=16746&status=done&style=none&taskId=u0a7e4326-e87f-445c-8365-7778bdc9a07&width=376)

2.使用

在组件中的使用方法有两种:

方法1:

this.$store.getters.xxx

代码演示:

  1. <!-- 频道列表 开关 通过定位 -->
  2.     <div v-if="$store.getters.isLogin" class="bar-btn" @click="showChannelEdit=true">
  3.         <van-icon name="wap-nav"/>
  4.     </div>

方法2:

mapGetters

代码演示:

  1. import { mapGetters } from 'vuex'
  3. computed: {
  4.     ...mapGetters(['isLogin'])
  5.   },

在视图中:

  1. <!-- 如果是登陆用户(有没有token)，则显示x按钮 -->
  3.   本来是这样写的: $store.state.tokenInfo.token
  4. <!-- <span class="close" @click="hClose(item)" v-if="$store.state.tokenInfo.token"> -->
  6.   现在是这样写的 isLogin
  7.     <span class="close" @click="hClose(item)" v-if="isLogin">
  8.     <van-icon name="cross"></van-icon>
  9. </span>