Vuex概念并实现一个简单的Vuex

最新推荐文章于 2024-11-09 21:44:05 发布

只在无意间

最新推荐文章于 2024-11-09 21:44:05 发布

阅读量196

点赞数

分类专栏： Vuex vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44811288/article/details/108447200

版权

Vuex是为Vue.js设计的状态管理库，用于复杂组件通信和数据共享。核心概念包括Store、State、Getter、Mutation和Action。在何时使用Vuex、如何实现简单Vuex的场景中，涉及install方法、Store构造、commit和dispatch函数的定义。

摘要由CSDN通过智能技术生成

Vuex

什么是Vuex

Vuex 是专门为Vue.js设计的状态管理库
Vuex 采用集中式的方式存储需要共享的状态
Vuex 的作用是进行状态管理，解决复杂组件通信，数据共享
Vuex 集成到了 devtools中，提供了time-travel时光旅行历史回滚功能

什么情况下使用Vuex

非必要的情况不要使用 Vuex
大型的单页应用程序
- 多个视图依赖于同一状态
- 来自不同视图的行为需要变更同一状态

Vuex 核心概念：

Store：
- 每一个应用仅有一个Store
- Store是一个容器包含着应用的大部分状态
State：
- 单一状态树，也是唯一的
- 状态是响应式的
Getter：
- 计算属性，对计算结果进行缓存
Mutation：
- 状态的变化必须通过提交mutation来完成
Action：
- 可以进行异步操作，内部改变状态的时候需要提交mutation
Module：
- 将Store分割成模块

Vuex工作流程

实现一个简单的Vuex

1.作为一个插件首先要定义install方法

这里和之前实现简单的router不同
- 在使用Vuex的使用是直接使用的Vue.use(Vuex)
- 而实现的时候是使用的new Vuex.Store()
- 所以需要默认导出一个对象,对象内包含Store,和install

// 缓存Vue的实例到全局中
let _Vue
function install(vue) {
    // 只在实例中挂载一次
    if(Store.installed) return
    Store.installed = true
    _Vue = vue
    // 把创建vue实例时候传入的store对象注入的vue实例上
    // 混入，这里混入所有的vue实例都会有
    _Vue.mixin({
        beforeCreate(){
            if(this.$options.store) {
            // 原型上挂在操作只需要执行一次，如果是组件不执行，如果是vue实例才执行
            _Vue.prototype.$store = this.$options.store
            }     
        }
    })
  })
}

2.定义Store类中的constructor

根据传入的参数来初始化Store
然后初始化Store内的属性
- state是响应式的
- 把getters内的方法通过Object.defineProperty转换成getters对象中的get访问器

class Store {
   
    constructor(options) {
   
        // 解构出来传递的选项， 默认值是空对像
        const {
   
            state = {
   },
            getters = {
   }
            mutations = {

最低0.47元/天解锁文章