Vue3笔记-我对Vuex、选项API和组合API的分析和理解

253 阅读1分钟

Vuex的理解:

Vue3的Vuex和Vue2的Vuex最大的区别在于实例化的区别:

在Vue2中:

// Vue2实例化
 new Vuex.Store({})

在Vue3中:

// 这是Vue3的典型风格:按需导入
// 在Vue3中他换了个名字,现在叫做 createStore 了
import { createStore } from 'vuex'
// Vue3实例化
export default createStore({
  // 状态
  state: {
  },
  // 修改状态
  mutations: {
  },
  // 异步操作
  actions: {
  },
  // 模块化拆分
  modules: {
  },
  // 类似于组件的计算属性
  getters: {
  }
})

就是创建store对象采用createStore方法,而不是new了


选项API和组合API的理解:

什么是选项API写法:Options ApI

  • 咱们在vue2.x项目中使用的就是 选项API 写法

    • 代码风格:data选项写数据,methods选项写函数...,一个功能逻辑的代码分散。
    • 优点:易于学习和使用,写代码的位置已经约定好
    • 缺点:代码组织性差,相似的逻辑(功能)代码不便于复用,逻辑复杂代码多了不好阅读。

什么是组合API:Composition API

  • 以功能为单位组织代码结构,后续重用功能更加方便。

总结:组合API的最大好处就是以功能为单位组织代码结构,有利于代码的复用