Vuex状态管理简单使用方法

vue

Vuex 是什么?

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

Vuex通俗说就是组件间数据之间的共享。

首先安装vuex

直接使用npm安装 npm install vuex或者直接到页面引入vuex.js文件。


package.json文件查看安装

建立store.js文件(命名可以随便取)

定义srore.png

新的的store.js文件里面创建 state-储存状态 、Mutation-更改 Vuex 的 store 中的状态的方法、Action-提交的是 mutation

main.js引入store 这样就可以全局使用

设置好这些东西后你就可以到任何组件里面调用相应的方法

单个的状态获取

多个状态获取

引入vuex使用mapstate

引入vuex
多个状态管理使用

组件里面分发Action

你在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store):

引入vuex使用mapActions
methods写入分发
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,964评论 0 7
  • 目录 - 1.什么是vuex? - 2.为什么要使用Vuex? - 3.vuex的核心概念?||如何在组件中去使用...
    我跟你蒋阅读 4,128评论 4 51
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,691评论 7 61
  • Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有...
    skycolor阅读 874评论 0 1
  • 从前,冥王星一直在国际上太阳系内被承认,后来,因为人们寻不到他,所以被驱逐出了太阳系,而我听到这个消息时,...
    简二二22阅读 233评论 0 0