【VUEX】state、mutations、actions、getters、modules以及辅助函数mapState和mapGetters-Toy模板网

这篇具有很好参考价值的文章主要介绍了【VUEX】state、mutations、actions、getters、modules以及辅助函数mapState和mapGetters。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

提供一种集中式存储管理应用程序中的所有组件的状态，并将其分离到一个可预测的状态容器中。

属性	作用
`state`	`存放状态`（数据），所有组件共享
`mutations`	唯一可以修改state的地方，`改变state状态`需要通过显示地`commit(提交)mutation`（同步）
`actions`	用于`异步操作`和`提交mutations`，根据后端接口返回数据去`commit更新数据`
`getters`	`获取`state中的状态
`modules`	`将store分割成模块`，每个模块都拥有自己的state、mutation、action、getters和子模块，以便提高应用程序的可维护性

属性	作用	用法
`mapState`	将 store 中的 state 映射到局部计算属性	computed: {…mapState([‘count’, ‘xx’]),}
`mapGetters`	将 store 中的 getter 映射到局部计算属性	computed: {…mapGetters([‘count’, ‘xx’]),}

当一个组件需要获取多个状态的时候，可以使用 mapState或mapGetters 辅助函数帮助我们生成计算属性，减少冗余代码：

// store 中的 state、getter 映射到局部计算属性
import { mapState, mapGetters } from 'vuex';

computed: {
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState(['count']),
  ...mapGetters(['count']),
  localComputed () { /* ... */ },
}

可以通过 this.$store 访问store实例，从Store中读取state(状态)，改变state状态需要通过显示地commit(提交)mutation;文章来源地址https://www.toymoban.com/news/detail-535530.html

//当有modules模块化时要注意提交commit需要加上文件名
this.$store.commit('app/SET_COUNT', 10)

到了这里，关于【VUEX】state、mutations、actions、getters、modules以及辅助函数mapState和mapGetters的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

【VUEX】state、mutations、actions、getters、modules以及辅助函数mapState和mapGetters