简易讲解vuex状态管理的使用方式

1. vuex是一个可以用来管理vue.js的参数、函数的复用和改变的工具。主要是为了提供页面的属性、提供接口等函数的复用，持久化保持属性值。

2. 项目对vuex的功能使用方式进行了分离，分离出了三个文件。

　State.js 用于定义参数、mutations.js用于获取数值、actions.js用于对数值进行操作，如调用接口之类的操作后，再进行数值的传递。上图的index.js是用于引用三个文件，并且将vuex引用vue。

3.调用vuex使用：this.$store.commit(函数名,data) 直接使用这个命令可以将参数赋值给，定义过了的用于获取数据的mutaions.js的文件。

4.使用计算函数的方式，获取该参数的数值，或者直接使用this.$store.state.参数名（这种使用方式首次获取不到值，只能获取到空值，需要通过计算函数或者watch函数去使用；

在vue中使用的vuex定义的参数以及定义的函数

import {mapActions, mapState}       from 'vuex'；

  computed: { //引入vuex定义的参数
        ...mapState(['user'])，//使用方式，为直接this.xxx指向该参数，获取参数数值
    }，
    methods: { //将已经定义好的vuex函数引入
        ...mapActions(['resetUser']),

        reset () {//使用函数的方式 this.xxx直接调用，并将参数传入，
               this.resetUser({id: this.user.id, name: this.name, password: this.password})

        }
    }

网上的一些使用资料：https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&fo=pc

简易讲解vuex状态管理的使用方式

猜你喜欢