Vuex状态管理器

目录

1、什么是vuex

2、vuex的使用场景:

3、vuex的工作方式: 

4、vuex的核心API

​ (1)state:

(2)mutations

(3)actions:通过actions去触发mutations中的方法,实现对state的异步修改

(4)getters:用于获取state的属性值。类似于state的计算属性

(5)modules:在大型项目中用于管理多个子模块的state

5、应用

        注意版本:vuex3对应的vue2,vuex4对应的vue3

​ (1)安装vuex

(2)定义vuex的store(仓库)

​ (3)在main.js文件中进行配置

(4)在组件中使用

6、强调

A、在组件中触发mutations中定义的方法:触发同步方法

B、在组件中触发actions中定义的方法:触发异步方法

C、获取state中属性值的方法:

D、在定义vuex的Store实例时不能使用this

  7、vuex的工作流程总结

(1)在组件中通过commit直接向mutations提交修改state的请求、或者通过dispatch向actions派发请求

(2)mutations通过接收到的请求去修改state的状态

(3)当state的状态发生改变后,组件通过计算属性(computed)获取改变后state,刷新组件


1、什么是vuex

vue项目中的状态管理器(状态管理工具),vue项目的状态是通过vue实例(组件)绑定的变量来体现。所以也可以说vuex是用来管理vue项目中的各种变量(vue项目中的组件可以访问vuex中管理的变量—- 方便了组件的通信)。

2、vuex的使用场景:

​ (1)不适合:小型的简单应用

​ (2)适合:大型的单页面应用

​ A、多个视图(组件)依赖同一个状态:

​ B、不同的视图的行为需要改变同一个状态

3、vuex的工作方式: 

(1)在全局中定义一个state:state本质是一个对象,该对象的属性就是vue组件用到的变量(所有组件共享这些变量)

​ (2)在vue组件中若要更新state的值,必须通过mutation来进行(只能通过mutations去改变state的状态),只能同步修改(即mutations中的方法都是同步)

​ (3)若要异步的修改state的值,需要通过actions来进行(action不能直接修改state,但是它可以向mutation发起请求,由mutation来修改state的值,可以在action中定义异步方法)

4、vuex的核心API

  • state 相当于data
  • mutations 相当于 methods (只能写同步)
  • action 相当于 methods中的异步方法 (只能写异步)
  • getters 相当于 computed 计算属性
  • modules 模块化思想

(1)state

        ​ A、必须是唯一的

​         B、本质是一个对象,维护的是vue的状态

​         const state= {

        ​         属性名:初始化值

​         }

​ 或:

        ​ state: {

​                 属性名:初始化值

        ​ }

(2)mutations

        ​ A、作用:用来修改state

        ​ B、定义了多个用于修改state的方法

​         C、只能包含同步代码

        ​ D、定义方式:

​ const mutations = {

​         方法名1(state,[data]){

​         //更改state的属性值

        },

        ​ 方法名2(state,[data]){

​         //更改state的属性值

​         }

​ }

​         E、触发方式:

                ​ a、在actions中通过 commit(‘mutations的方法名’ ) 实现触发

                ​ b、在组件中通过 this.$store.commit(‘方法名’,params) 实现触发

(3)actions:通过actions去触发mutations中的方法,实现对state的异步修改

​         A、可以包含异步代码

​         B、通过commit触发mutations来间接修改state

​         C、触发方式(如何触发actions):

                在组件中通过 this.$store.dispatch(‘action 名称’,  data1) 进行触发

        ​ D、定义方式:

         const actions = {

​                 方法名({commit,state},data1){

​                 commit(‘mutations中的方法名’)

​                 }

        ​ }

(4)getters:用于获取state的属性值。类似于state的计算属性

         A、定义方法:

​         const getters= {

​                 方法名([参数]){

​                 return state.属性名

​                 }

​         }

        ​ B、在组件中的使用方式: this.$store.getters.方法名

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值