vuex基础入门

今天看了vuex基础入门整套教程,做下记录。

一、什么是Vuex?

1、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。(只能在vue框架下使用)

2、它采用集中式存储管理应用的所有组件的状态(类似一个全局对象,但也有不同)

  与单纯的全局对象有以下两点不同:

  1. )Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

  2. )你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

3、并以相应的规则保证状态以一种可预测的方式发生变化(响应式变化)

二、应用场景

1、多个视图依赖于同一状态(读)

2、来自不同视图的行为需要改变同一状态(写)

三、vuex组成

1. State:数据仓库;

  State本身就有数据的意思,在Vuex中代表的是数据的来源,Vuex所有数据都会存储在State中,是数据的唯一来源。

2. getter:用来获取数据;

3. Mutation:用来修改数据;

(1)Mutation本质上也是一个function。

(2)Mutation的操作是必须是同步的,异步的话会有很大的麻烦,以下引用官方解释

4. Action:用来提交mutation

    可以进行异步的操作

四、vuex安装

1、没有安装脚手架工具的先安装脚手架工具:

  npm install -g @vue/cli
  或者:cnpm install -g @vue/cli
  或者:yarn global add @vue/cli

2、安装vuex:npm install vuex --save

 查看package.json,出现以上内容说明安装成功

3、创建实例:new Vuex.store()

4、main.js中将vuex实例挂载到vue对象上,

每一个 Vuex 应用的核心就是 store(仓库),相当于一个容器

在store里面定义 state、getters、mutations、actions; 如下:

五、Vuex实际使用

为了更好的管理代码,在实际做项目中,一般把state、getters、mutations、actions独立出来一个js文件放到store文件下,再引入到index.js

暴露store,在main.js引入store再挂载

 

 

 

1、state存放需要应用于多个组件的共用数据,

 
组件中通过store.state.userStatus就可以取到数据
 
2、getters用于获取数据

 

 组件中通过store.getters.memberInfo就可以调用memberInfo方法

3、mutations用于同步更新state的数据

 组件通过store.commit("方法名",传参对象),便调用mutations中的方法把state中的数据更改了

例如this.$store.commit(

    "setMemberInfo", {
                    userStatus: 0,
                    vipLevel: 0
                })
 
4、actions:用于异步更新state的数据

 

 组件通过

store.dispatch("方法名", 传参对象).then(res => {
                
});

调用到actions中的方法把state的数据进行更新

-------------------------------------------------------------------------------------------------------

除了以上调用方式,还有一种方式就是使用辅助函数

 

1、组件引入辅助函数
import { mapGetters, mapState ,mapActions,mapMutations} from "vuex";
2、在组件的computed里面定义,
computed: {
        ...mapState(["userStatus", "vipLevel"]),//映射哪些字段就填入哪些字段
        ...mapGetters(["memberInfo"]),
   ...mapActions(["setMemberInfo"]),
   ...mapMutations(["buyVip"])
    },
然后在组件中便可直接使用
例如:
<span>{{memberInfo}}</span>

以上关于Vuex的介绍就结束了

------------------------------------------------------------------------------------------------------------

最后补充下怎样在谷歌浏览器下安装Vue.js devtools工具

1、下载插件:https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

2、下载的zip包解压

3、打开谷歌浏览器,输入chrome://extensions/  回车,

4、打开开发者模式,

5、将下载的crx文件拖到到扩展程序里,提示安装成功

6、重新打开vue项目,按F12即可看到vue的调试

 

 

 

posted @ 2021-04-01 17:17  有忆  阅读(121)  评论(0编辑  收藏  举报