放肆青春的博客
首页
前端
算法
网络
面试
技术
后端
运维
杂项
数据库
工具
网址
电脑
个人
文章
  • 分类
  • 标签
  • 归档
github (opens new window)
gitee (opens new window)

放肆青春

一个前端菜鸟的技术成长之路
首页
前端
算法
网络
面试
技术
后端
运维
杂项
数据库
工具
网址
电脑
个人
文章
  • 分类
  • 标签
  • 归档
github (opens new window)
gitee (opens new window)
  • 前端

    • 前端 概览
    • 前端汇总

    • front 博文

    • front 项目总结

    • front 高级

    • front tools

  • vue

    • vue 概览
    • vue 汇总

    • vue 博文

      • vue对比
      • vue-router
      • vuex
        • vuex
          • vuex 的数据传递流程
          • vuex 工作原理
          • vuex 五大核心属性
          • action
      • vue2生命周期
      • vue组件通信
      • vue修饰符
      • vue异步组件
      • vue插槽
      • vue2 hook
    • vue 项目总结

    • vue 高级

  • html

    • html 概览
    • html 汇总

    • html 博文

  • css

    • css 概览
    • css 汇总

    • css 博文

    • sass

    • less

  • js

    • javascript 概览
    • JS 汇总

    • ES6

    • JS 博文

    • JS 工具

  • node

    • node 概览
    • node 汇总

    • node 框架

    • node 博文

  • react

    • react 概览
    • react 汇总

    • react 博文

    • react 高级

  • 微信小程序

    • 微信小程序 概览
    • 微信小程序总结
    • 微信小程序文章
    • 微信小程序 博文

    • 微信小程序 高级

  • 微信公众号

    • 微信公众号 概览
    • 微信公众号总结
    • 微信公众号文章
  • 多端开发

    • 多端开发
    • dsbridge 概览
    • jsbridge 概览
    • webview
    • uniapp

      • uniapp 概览
    • taro

      • taro 概览
    • flutter

      • flutter 概览
      • flutter 环境搭建
    • electron

      • electron 概览
  • front
放肆青春
2021-04-01

vuex

# vuex

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

# vuex 的数据传递流程

image

# vuex 工作原理

  1. 通过全局注入 store 对象,来实现组件间的状态共享

利用 vue 的插件机制,使用 Vue.use(vuex)时,会调用 vuex 的 install 方法,装载 vuex

install 把传入的 _Vue 赋值给 Vue 并执行了 applyMixin(Vue) 方法,applyMixin 方法使用 vue 混入机制,在 vue 的生命周期 beforeCreate 钩子函数前混入 vuexInit 方法,vuexInit 方法实现了 store 注入 vue 组件实例,并注册了 vuex store 的引用属性$store

Vuex 的 state 状态是响应式,是借助 vue 的 data 是响应式,将 state 存入 vue 实例组件的 data 中;

Vuex 的 getters 则是借助 vue 的计算属性 computed 实现数据实时监听。

image

# vuex 五大核心属性

  1. state:存储数据,存储状态;在根实例中注册了 store 后,用 this.$store.state 来访问;对应 vue 里面的 data;存放数据方式为响应式,vue 组件从 store 中读取数据,如数据发生变化,组件也会对应的更新。

  2. getter:可以认为是 store 的计算属性,它的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

  3. mutation:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

  4. action:包含任意异步操作,通过提交 mutation 间接更变状态。

  5. module:将 store 分割成模块,每个模块都具有 state、mutation、action、getter、甚至是嵌套子模块。

# action

vuex 里面可以直接修改 state 的值,为什么还要设置一个 action?

因为 vuex 里 actoion 可以处理异步操作以及在多重 mutation 中修改 state 的值


vuex 源码解析:https://github.com/answershuto/learnVue/blob/master/docs/Vuex源码解析.MarkDown (opens new window)

更新时间: 2/10/2022, 7:21:32 PM
vue-router
vue2生命周期

← vue-router vue2生命周期→

最近更新
01
前端权限管理
02-24
02
vue2指令
02-24
03
vue2 hook
02-24
更多文章>
Theme by Vdoing | Copyright © 2019-2022 放肆青春
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式