vue实例讲解之vuex的使用

时间:2023-03-08 22:24:27

vuex是一个状态管理插件,本文通过一个简单的实例来讲解一下,vuex的使用。

先看一张官方的图:

vue实例讲解之vuex的使用

这个图新手一看估计是蒙的,简单解释一下,这个图表示的就是vue通过Action Mutations 和state三者之间的交互来达到改变componets状态的作用。组件disapth事件之后,触发vuex的Actions Actions通过commit传递一个action给Mutation执行,Mutation里面对state进行操作。state里面定义的状态返回出去,来控制compoents。

废话不多说了,直接上手一个项目就明白了。

先来整理一下vuex的使用的基本框架搭建:

第一步:引用vuex:

vue实例讲解之vuex的使用

第二步:vue实例讲解之vuex的使用

第三步:导出vuex设置

vue实例讲解之vuex的使用

第四步:在打包的入口文件里面引用vuex配置文件并且在vue实例上挂载

vue实例讲解之vuex的使用

第五步:设置actions,mutaions,states,getters

vue实例讲解之vuex的使用

基本流程知道了,下面就来看如何实现一个真实需求:

先看一下项目的效果,我们需要通过vuex来操作这个数字。通过点击按钮来增加数字,减少这个数字。

vue实例讲解之vuex的使用

先用vue-cli搭建一个基础模板。

安装vuex  npm install vuex --save-dev

然后在App.vue里面添加好按钮布好局,并且写好各自按钮点击的事件。

vue实例讲解之vuex的使用

然后在script标签里面将vuex引用过来。

这里vuex有两个对象:

mapGeetters:获取数据的

mapActions : 管理所有方法

具体使用方法,如下面

computed:mapGetters([

'count',

'getOdd'

]),

methods:mapActions([

'increament',

'decrement',

'clickOdd'

])

vue实例讲解之vuex的使用

接下来,新建一个store文件夹:里面新建index.js ,actions.js,mutations.js,getters.js,type.js四个文件。

项目结构如下:

vue实例讲解之vuex的使用

index.js代码如下:

vue实例讲解之vuex的使用

types:

vue实例讲解之vuex的使用

Actions:

vue实例讲解之vuex的使用

gettes:

vue实例讲解之vuex的使用

mutations:

vue实例讲解之vuex的使用

执行npm run dev 就实现我们的需求了,以后所有的状态管理就依葫芦画瓢了。

项目源代码:查看git地址。