Vuex（三）

作者：小恺

2022 年 7 月 04 日
本文字数：1365 字
阅读完需：约 4 分钟

Vuex 是一个专为 vue.js 应用程序开发的状态管理模式。他采用集中式存储来管理应用程序中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到了 vue 的官网调试工具 vue-devtools 中，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能

getter

vuex 允许我们在 store 中定义 gettrs（可以认为是 store 计算属性）与计算属性一样，getter 的返回值根据他的依赖项被缓存起来，且只有在他的依赖项发生改变时才会重新计算

getter 接收 state 作为第一参数，代码如下：

const store = new Vuex.Store({    state: {        books: [            { id: 1, title: 'vue.js', isSold: false },            { id: 2, title: 'vue.js2', isSold: true },            { id: 3, title: 'vue.js3', isSold: true }        ]    },    getters: {        sellingBooks: state => state.books.forEach(book => book.isSold === true)    }
})

复制代码

getter 也可以接收其他 getter 作为第二参数，代码如下：

  getters: {        sellingBooks: state => state.books.forEach(book => book.isSold === true),        sellingBooksCount:(state,getters)=>{            return getters.sellingBooks.length        }    }

复制代码

在组件内要注意作为属性访问的 getter 作为 Vue 的响应式系统的统一部分被缓存。

如果想简化上述 getter 在计算属性中的访问形式，可以使用 mapGetters 辅助函数，这个辅助函数的用法和 mapMutations、mapState 类型，使用对象展开运算符将 getter 混入 computed 中，传递数组作为参数，代码如下：

 computed:{    ...mapGetters([      'sellingBooss',      'sellingBoossCount'    ])  }

复制代码

getter 还有更灵活的用法，通过让 getter 返回一个函数，来实现给 getter 传参，代码如下：

 getters:{        getBookById:function(state){            return function(id){                return state.books.find(book=>book.id===id)            }        }    }

复制代码

action

在定义 mutaion 时，有一条重用的原则就是 mutation 必须是同步函数，。。在 mutation 处理器函数中，不能存在异步调用。例如下面代码：

const store = new Vuex.Store({    state: {       count:0    },   mutations:{    increment(state){        setTimeout(()=>{            state.count++        },2000)    }   }

复制代码

在 increment 函数中调用 setTimeout（）方法在 2s 后更新 count，这就是一个异步调用，不要这么做，因为这会让调试变得困难

确实需要执行异步操作的话那么应该使用 action。action 类似于 mutasion，不同之处在于：
action 提交的是 mutation，而不是直接变更状态
action 可以包含任意异步操作

一个简单的 action 如下所示：

const store = new Vuex.Store({    state: {       count:0    },   mutations:{    increment(state){      state.count++    }   },   actions:{    increment(context){        context.commit('increment')    }   }
})

复制代码

action 处理函数接收一个与 store 实例具有相同方法和属性的 context 对象，因此可以利用该对象调用 commit 方法来提交 mutation，或者通过 context.state 和 context.getters 来访问 state 和 getter，甚至可以用 context.dispatch 调用其他的 action，要注意的是，context 对象并不是 store 实例本身

发布于: 刚刚阅读数: 3

小恺

关注

还未添加个人签名 2021.02.22 加入

还未添加个人简介

发布

暂无评论

创作场景

Vuex（三）

getter

action

小恺

评论