状态管理Vuex 之 Getter

状态管理Vuex 之 Getter

Getter 介绍

可以认为是 store 的计算属性，对 state 的加工，是派生出来的数据。

• 就像 computed 计算属性一样，getter 返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。
• 可以在多组件中共享 getter 函数，这样做还可以提高运行效率。

Getter 构建注册

• 在 uni-app 项目根目录下，store 目录 index.js 文件

  /* 文件路径：store/index.js */
  import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  
  const store = new Vuex.Store({
      state: {
          todos: [
              {
                  id: 1,
                  title: '代办事项一',
                  done: true
              },
              {
                  id: 2,
                  title: '代办事项二',
                  done: false
              }
          ]
      },
      getters: {
          doneTodos: state => {
              return state.todos.filter(todo => todo.done)
          }
      }
  })
  
  export default store
  

• 在 store 上注册 getter，getter 方法接受以下参数：

  • state，如果在模块中定义则为模块的局部状态

  • getters，等同于 store.getters

    /* 文件路径：store/index.js */
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
        state: {
            todos: [
                {
                    id: 1,
                    title: '代办事项一',
                    done: true
                },
                {
                    id: 2,
                    title: '代办事项二',
                    done: false
                }
            ]
        },
        getters: {
            doneTodos: state => {
                return state.todos.filter(todo => todo.done)
            },
            doneTodosCount: (state, getters) => {
                // state ： 可以访问数据
                // getters : 访问其他函数，等同于 store.getters
                return getters.doneTodos.lenght
            },
            getTodoById: (state) => (id) => {
                return state.todos.find(todo => toto.id === id)
            }
        }
    })
    
    export default store
    

获取 getters

• 通过属性访问，Getter 会暴露为 store.getters 对选，就可以以属性的形式访问。

  <!-- 页面路径：pages/index/index.vue -->
  <template>
      <view v-for="(item,index) in todos">
          <view>{{item.id}}</view>
          <view>{{item.title}}</view>
          <view>{{item.done}}</view>
      </view>
  </template>
  <script>
      import store from '@/store/index.js' //需要引入store
      export default {
          computed: {
              todos() {
                  return store.getters.doneTodos
              }
          }
      }
  </script>
  

  注意 getter 在通过属性访问是作为 Vue 的相应式系统的一部分缓存其中的。

• 通过 this.$store 访问

  <!-- 页面路径：pages/index/index.vue -->
  <template>
      <view v-for="(item,index) in todos">
          <view>{{item.id}}</view>
          <view>{{item.title}}</view>
          <view>{{item.done}}</view>
      </view>
  </template>
  <script>
      export default {
          computed: {
              todos() {
                  return this.$store.getters.doneTodos
              }
          }
      }
  </script>
  

• 通过方法访问。

  <!-- 页面路径：pages/index/index.vue -->
  <template>
      <view v-for="(item,index) in todos">
          <view>{{item.id}}</view>
          <view>{{item.title}}</view>
          <view>{{item.done}}</view>
      </view>
  </template>
  <script>
      export default {
          computed: {
              todos() {
                  return this.$store.getters.getTodoById(2)
              }
          }
      }
  </script>
  

  注意 getter 通过方法访问时，每次都会进行调用，而不会缓存结果。

• 通过 mapGetters 辅助函数访问。

  mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

  <!-- 页面路径：pages/index/index.vue -->
  <template>
      <view>
          <view>{{doneTodosCount}}</view>
      </view>
  </template>
  <script>
      import {mapGetters} from 'vuex' //引入mapGetters
      export default {
          computed: {
              // 使用对象展开运算符将 getter 混入 computed 对象中
              ...mapGetters([
                  'doneTodos',
                  'doneTodosCount'
              ])
          }
      }
  </script>
  

  如果想给一个 getter 属性取别名，则需要使用对象形式

  <!-- 页面路径：pages/index/index.vue -->
  <template>
      <view>
          <view>{{donesCount}}</view>
      </view>
  </template>
  <script>
      import {mapGetters} from 'vuex' //引入mapGetters
      export default {
          computed: {
              // 使用对象展开运算符将 getter 混入 computed 对象中
              ...mapGetters({
                  // 把 this.donesCount 映射为 this.$store.getters.doneTodosCount
                  donesCount: 'doneTodosCount'
              })
          }
      }
  </script>
  

  以上代码都是手写 官方代码，经过运行测试通过的。
  作为程序员，要想学会一门技术，一定不能偷懒，一定要手写运行代码！！！