vuex (3)

2022-02-11 09:02:00 阅读：176 来源： 互联网

标签：... todo getters state getter vuex store

Getter

有时候我们需要从store中的state中派生出一些状态，例如对列表进行过滤并计数

computed: {
  doneTodosCount{

     return this.$store.state.todos.filter(todo => todo.done).length
  }
}

如果有多个组件，需要用此段代码，我们要么复制它，或者抽取到一个共享函数然后在多出导入它，无论哪种方式都不是很理想。

Vuex 允许我们在store 中定义“getter” (可以认为是store的计算属性)

Getter 接受 state作为其第一个参数：

const store = createStore({

   state: {
      todos: [
           {id: 1,  text: '...',  done:true},
           {id: 2,  text: '...',  done:false}
      ]
   },

   getters: {
      doneTodos: (state) => {
            return state.todos.filter(todo => todo.done)
      }
   }
})

Getter 也可以接受其他 getter作为第二个参数：

...

getters: {

     // ...
     doneTodosCount (state, getters) {
       return getters.doneTodos.length 
    }
}

...

 store.getters.getTodoById(2)

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

通过属性访问

Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：

store.getters.doneTodos // => [{ id : 1,  text : "...",  done : true}]

通过方法访问

你也可以通过让 getter 返回一个函数，来实现给getter传参。

...
getters: {
   // ...
   getTodoById: (state) => (id) => {

          return state.todos.find(todo => todo.id === id);
   }
}

mapGetters 辅助函数

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

import { mapGetters} from 'vuex'
export default {
    // ...

    computed:{

         //使用对象展开运算符将 getter 混入 computed 对象中
         ...mapGetters([

             'doneTodosCount',
             'anotherGetter'
             // ...
        ])
   }
}

如果想getter属性另取一个名字，使用对象形式：

 ... mapGetters({

      // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
      doneCount: `doneTodosCount`
 })

标签：...,todo,getters,state,getter,vuex,store
来源： https://www.cnblogs.com/zhishiyv/p/15881781.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vuex (3)