avatar
文章
94
标签
89
分类
16
首页
归档
标签
分类
关于
虾壳
搜索
首页
归档
标签
分类
关于

Vue状态管理

发表于2023-10-04|更新于2023-10-04|前端前端教程
|字数总计:5|阅读时长:1分钟|阅读量:
文章作者: 虾壳
文章链接: http://yagote.github.io/2023/10/04/vue-zhuang-tai-guan-li/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 虾壳！
Vue前端VuexPinia
上一篇
ElasticSearch常用命令
下一篇
KubeSphere+项目部署+DevOps+Helm
相关推荐
2023-08-22
Vue.js、Vue-CLI、Vite的区别
2023-04-09
vue2和vue3的区别
2023-09-13
vuex——vue中的状态管理
目录
  1. 一、基本介绍
    1. 1、概览
    2. 2、相关概念
    3. 3、Vuex
    4. 4、Pinia
  2. 二、Vuex
    1. 1、Vuex概述
      1. 1.1 Vuex介绍
      2. 1.2 使用场景
      3. 1.3 优势
      4. 1.4 注意
    2. 2、需求: 多组件共享数据
      1. 2.1 创建项目
      2. 2.2 创建三个组件, 目录如下
      3. 2.3 源代码如下
    3. 3、vuex 的使用 - 创建仓库
      1. 3.1 安装 vuex
      2. 3.2 新建 store/index.js 专门存放 vuex
      3. 3.3 创建仓库 store/index.js
      4. 3.4 在 main.js 中导入挂载到 Vue 实例上
      5. 3.5 测试打印Vuex
    4. 4、核心概念 - state 状态
      1. 4.1 目标
      2. 4.2 提供数据
      3. 4.3 访问Vuex中的数据
      4. 4.4 通过$store访问的语法
      5. 4.5 代码实现
        1. 4.5.1 模板中使用
        2. 4.5.2 组件逻辑中使用
        3. 4.5.3 js文件中使用
    5. 5、通过辅助函数 - mapState获取 state中的数据
      1. 5.1 第一步：导入mapState (mapState是vuex中的一个函数)
      2. 5.2 第二步：采用数组形式引入state属性
      3. 5.3 第三步：利用展开运算符将导出的状态映射给计算属性
    6. 6、开启严格模式及Vuex的单项数据流
      1. 6.1 目标
      2. 6.2 直接在组件中修改Vuex中state的值
      3. 6.3 开启严格模式
    7. 7、核心概念-mutations
      1. 7.1 定义mutations
      2. 7.2 格式说明
      3. 7.3 组件中提交 mutations
      4. 7.4 练习
      5. 7.5 总结
    8. 8、带参数的 mutations
      1. 8.1 目标：
      2. 8.2 语法
        1. 8.2.1 提供mutation函数（带参数）
        2. 8.2.2 提交mutation
    9. 9、练习-mutations的减法功能
      1. 9.1 步骤
      2. 9.2 代码实现
    10. 10、练习-Vuex中的值和组件中的input双向绑定
      1. 10.1 目标
      2. 10.2 实现步骤
      3. 10.3 代码实现
    11. 11、辅助函数- mapMutations
    12. 12、核心概念 - actions
      1. 12.1 定义actions
      2. 12.2 组件中通过dispatch调用
    13. 13、辅助函数 -mapActions
    14. 14、核心概念 - getters
      1. 14.1 定义getters
      2. 14.2 使用getters
        1. 14.2.1 原始方式-$store
        2. 14.2.2 辅助函数 - mapGetters
    15. 15、使用小结
    16. 16、核心概念 - module
      1. 16.1 目标
      2. 16.2 问题
      3. 16.3 模块定义 - 准备 state
    17. 17、获取模块内的state数据
      1. 17.1 目标
      2. 17.2 使用模块中的数据
      3. 17.3 代码示例
    18. 18、获取模块内的getters数据
      1. 18.1 语法
      2. 18.2 代码演示
    19. 19、获取模块内的mutations方法
      1. 19.1 注意
      2. 19.2 调用方式
      3. 19.3 代码实现
    20. 20、获取模块内的actions方法
      1. 20.1 目标
      2. 20.2 注意
      3. 20.3 调用语法
      4. 20.4 代码实现
    21. 21、Vuex模块化的使用小结
      1. 21.1 直接使用
      2. 21.2 借助辅助方法使用
  3. 三、Pinia
    1. 1、什么是Pinia
    2. 2、手动添加Pinia到Vue项目
    3. 3、Pinia基础使用
    4. 4、getters实现
    5. 5、action异步实现
    6. 6、storeToRefs工具函数
    7. 7、Pinia的调试
    8. 8、Pinia持久化插件
Copyright © 2021 - present 虾壳
搜索
数据库加载中