C++ 全栈知识体系C++ 全栈知识体系
✿导航
  • 基础
  • 函数
  • 知识点
  • IO框架
  • 新版本特性
  • 数据库原理
  • SQL语言
  • SQL - MySQL
  • NoSQL - Redis
  • NoSQL - ElasticSearch
  • 算法基础
  • 常见算法
  • 领域算法
  • 分布式算法
  • 数据结构与算法
  • 计算机网络
  • 操作系统
  • 计算机组成
  • 开发
  • 测试
  • 架构基础
  • 分布式系统
  • 微服务
  • 中间件
  • 概念
  • 理论
  • 架构设计原则
  • 设计模式
  • 协议
  • 技术选型
  • 编码规范
  • 流水线构建 - CI/CD
  • 知识点 - Linux
  • 网站 - Nginx
  • 容器化 - Docker
  • 容器编排 - Kubernetes
  • 服务网格 - Service Mesh Istio
  • 常用快捷键 - Shortcut
  • 工具使用 - Tools
  • 开源项目
  • 学习项目
  • 个人项目
  • 项目开发
  • 项目Idea
  • 并发
  • 部署
  • 分布式
  • 知识
  • 问题
  • 编程语言与技术
  • 系统与架构
  • 软件开发实践
  • 数据处理与应用设计
  • 个人
  • 产品
  • 团队
  • 知识体系
  • Vue
关于
✿导航
  • 基础
  • 函数
  • 知识点
  • IO框架
  • 新版本特性
  • 数据库原理
  • SQL语言
  • SQL - MySQL
  • NoSQL - Redis
  • NoSQL - ElasticSearch
  • 算法基础
  • 常见算法
  • 领域算法
  • 分布式算法
  • 数据结构与算法
  • 计算机网络
  • 操作系统
  • 计算机组成
  • 开发
  • 测试
  • 架构基础
  • 分布式系统
  • 微服务
  • 中间件
  • 概念
  • 理论
  • 架构设计原则
  • 设计模式
  • 协议
  • 技术选型
  • 编码规范
  • 流水线构建 - CI/CD
  • 知识点 - Linux
  • 网站 - Nginx
  • 容器化 - Docker
  • 容器编排 - Kubernetes
  • 服务网格 - Service Mesh Istio
  • 常用快捷键 - Shortcut
  • 工具使用 - Tools
  • 开源项目
  • 学习项目
  • 个人项目
  • 项目开发
  • 项目Idea
  • 并发
  • 部署
  • 分布式
  • 知识
  • 问题
  • 编程语言与技术
  • 系统与架构
  • 软件开发实践
  • 数据处理与应用设计
  • 个人
  • 产品
  • 团队
  • 知识体系
  • Vue
关于
  • 知识体系

    • 知识体系 - 入门
    • 知识体系 - CSS
    • 知识体系 - JavaScript
    • 知识体系 - 工程化
    • 知识体系 - 优化
    • 知识体系 - 测试
    • 知识体系 - 构建部署
    • 知识体系 - 资源
  • Vue2

    • Vue基础

      • Vue基础 - 简介
      • Vue基础 - 入门
      • Vue基础 - 模板语法
      • Vue基础 - 数据绑定
      • Vue基础 - MVVM模型
      • Vue基础 - 事件处理
      • Vue基础 - 计算属性
      • Vue基础 - 监视属性
      • Vue基础 - 绑定样式
      • Vue基础 - 条件渲染
      • Vue基础 - 列表渲染
      • Vue基础 - 过滤器
      • Vue基础 - 内置指令
      • Vue基础 - 自定义指令
      • Vue基础 - 生命周期
    • Vue组件

      • Vue组件 - 基础
      • Vue组件 - 非单文件组件
      • Vue组件 - 单文件组件
    • Vue脚手架

      • Vue脚手架 - 基础使用
      • Vue脚手架 - ref和props
      • Vue脚手架 - 混入
      • Vue脚手架 - 插件
      • Vue脚手架 - todoList案例
      • Vue脚手架 - 自定义事件
      • Vue脚手架 - 全局事件总线
      • Vue脚手架 - 消息订阅与发布(pubsub)
      • Vue脚手架 - Vue封装的过渡和动画
    • Vue中的Ajax

      • Vue中的Ajax - 基础
      • Vue中的Ajax - slot插槽
      • Vue中的Ajax - github案例学习
    • Vuex

      • Vuex - 基础
      • Vuex - 使用
    • Vue Router

      • Vue Router - 基础
      • Vue Router - 使用
      • Vue Router - 多级路由(嵌套路由)
      • Vue Router - 路由传参
      • Vue Router - 编程式路由导航
      • Vue Router - 缓存组件
      • Vue Router - 生命周期钩子
      • Vue Router - 导航守卫
      • Vue Router - 工作模式
  • Vue3

    • Vue3 - 快速上手
    • Vue3 - 创建Vue3.0工程
    • Vue3 - 常用 Composition API
    • Vue3 - 响应式原理对比
    • Vue3 - 生命周期对比
    • Vue3 - 其它 Composition API
    • Vue3 - 新的组件
    • Vue3 - 导航守卫
    • Vue3 - 其他

Vuex - 使用

基本使用

  1. 初始化数据、配置actions、配置mutations、操作文件store.js

<<< @/md/vue/vue2/vuex/src/store_index.js

  1. 组件中读取vuex中的数据:$store.state.xxx

  2. 组件中修改vuex中的数据:$store.dispatch('actions中的方法名',数据)或者$store.commit('mutations中的方法名',数据)

备注:若没有网络请求或者其他业务逻辑,组件中也可以越过actions,即不写dispatch,直接编写commit

getters的使用

  1. 概念:当state中的数据需要经过加工后再使用时,可以使用getters加工

  2. 在store.js中追加getters配置

    ......
    
    const getters = {
    	bigSum(state){
    		return state.sum * 10
    	}
    }
    
    //创建并暴露store
    export default new Vuex.Store({
    	......
    	getters
    })
    
  3. 组件中读取数据:$store.getters.bigSum

map方法使用

  1. mapState方法 => 用于帮助我们映射state中的数据为计算属性

    computed: {
        //借助mapState生成计算属性:sum、school、subject(对象写法)
         ...mapState({sum:'sum',school:'school',subject:'subject'}),
             
        //借助mapState生成计算属性:sum、school、subject(数组写法)
        ...mapState(['sum','school','subject']),
    },
    
  2. mapGetters方法 => 用于帮助我们映射getters中的数据为计算属性

    computed: {
        //借助mapGetters生成计算属性:bigSum(对象写法)
        ...mapGetters({bigSum:'bigSum'}),
    
        //借助mapGetters生成计算属性:bigSum(数组写法)
        ...mapGetters(['bigSum'])
    },
    
  3. mapActions方法 => 用于帮助我们生成与actions对话的方法,即包含$state.dispatch(xxx)的函数

    methods:{
        //靠mapActions生成:incrementOdd、incrementWait(对象形式)
        ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    
        //靠mapActions生成:incrementOdd、incrementWait(数组形式)
        ...mapActions(['jiaOdd','jiaWait'])
    }
    
  4. mapMutations方法 => 用于帮助我们生成与mutations对话的方法,即包含$state.commit(xxx)的函数

    methods:{
        //靠mapActions生成:increment、decrement(对象形式)
        ...mapMutations({increment:'JIA',decrement:'JIAN'}),
        
        //靠mapMutations生成:JIA、JIAN(对象形式)
        ...mapMutations(['JIA','JIAN']),
    }
    

备注:mapActions 与 mapMutations 使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象

模块化 + 命名空间

  1. 目的:让代码更好维护,让多种数据分类更加明确

  2. 修改store.js

    const countAbout = {
      namespaced:true,//开启命名空间
      state:{x:1},
      mutations: { ... },
      actions: { ... },
      getters: {
        bigSum(state){
           return state.sum * 10
        }
      }
    }
    
    const personAbout = {
      namespaced:true,//开启命名空间
      state:{ ... },
      mutations: { ... },
      actions: { ... }
    }
    
    const store = new Vuex.Store({
      modules: {
        countAbout,
        personAbout
      }
    })
    
  3. 开启命名空间后,组件中读取state数据

    //方式一:自己直接读取
    this.$store.state.personAbout.list
    //方式二:借助mapState读取:
    ...mapState('countAbout',['sum','school','subject']),
    
  4. 开启命名空间后,组件中读取getters数据

    //方式一:自己直接读取
    this.$store.getters['personAbout/firstPersonName']
    //方式二:借助mapGetters读取:
    ...mapGetters('countAbout',['bigSum'])
    
  5. 开启命名空间后,组件中调用dispatch

    //方式一:自己直接dispatch
    this.$store.dispatch('personAbout/addPersonWang',person)
    //方式二:借助mapActions:
    ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    
  6. 开启命名空间后,组件中调用commit

    //方式一:自己直接commit
    this.$store.commit('personAbout/ADD_PERSON',person)
    //方式二:借助mapMutations:
    ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
    
Last Updated:
Contributors: klc407073648
Prev
Vuex - 基础