快速学会使用Vuex

Posted le220

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了快速学会使用Vuex相关的知识,希望对你有一定的参考价值。

一、Vuex简介

官方定义

  • Vuex是一个专门为Vue.js应用程序开的状态管理模式
  • 它采用集中式存储管理应用的所有组件的状态
  • 并以相应的规则保证以一种可预测的方式发生变化

二、应用场景

  • 多个视图依赖于同一状态
  • 来自不同视图的行为需要改变同一个状态

三、Vuex的安装和组成介绍

  • State——数据仓库,存储所有数据状态
  • Getter——用来获取数据的
  • Mutation——用来修改数据的,同步
  • Action——用来提交mutation,异步

  安装

  • 安装vuex包:npm install vuex
  • 创建vuex实例:new Vuex.store()
  • Main.js中将vuex实例挂载到vue对象上

 

四、实现count++

  • State中创建count字段
  • Mutations中创建一个count++mutation
  • Button新增click事件触发mutation改变count

技术图片

 

 

核心代码

  App.vue

  技术图片

 

   main.js

  技术图片

 

以上是关于快速学会使用Vuex的主要内容,如果未能解决你的问题,请参考以下文章

快速了解Vuex

简单聊一下Vuex的基本使用(快速入门)

Vue项目中如何快速上手Vuex状态管理--使用心得-值得珍藏

vuex初始化配置及快速调用

vuex2快速入门

vuex初始化配置及快速调用