Vue学习日记4-vuex

Vuex概述

• Vuex是一个Vue的状态管理工具，状态就是数据
  • 相当于一个可以帮我们管理vue通用的数据（多组间共享的数据）的插件
• 场景
  • 某个状态在很多个组件来使用（个人信息）
  • 多个组件共同维护一份数据（购物车）
• 优势
  • 共同维护一份数据，数据集中化管理
  • 响应式变化
  • 操作简捷（vuex提供了一些辅助函数）

构建vuex环境

• 基于脚手架创建项目，构建vuex多组件数据共享环境
• 步骤
  • 在官方的day7笔记

创建一个空仓库

• 安装vuex
  • yarn add vue@3
  • vue2口诀：2 3 3；vue3口诀：3 4 4
• 新建store/index.js专门存放vuex

  • //vue相关核心代码
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    //插件安装
    Vue.use(Vuex)
    
    //创建仓库
    const store=new Vuex.Store()
    
    //导出给main.js使用
    export default store

• Vue.user(Vuex)
  • 创建仓库new Vuex.Store()
• 在main.js中导入挂载到Vue实例上

如何提供/访问数据

state状态

• State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储
• 在state对象中可以添加我们要共享的数据
• 使用数据
  • 通过store直接使用
  • 通过辅助函数
    • mapState是辅助函数，帮助我们把store中的数据自动映射到组件的计算属性中
    • 导入mapState
      • import {mapState} from 'vuex'
    • 数组方式引入state
      • mapState(['count'])
    • 展开运算符映射

      • computed:{
            ...mapState(['count'])
        }

mutations

• state中的数据只能通过mutations修改
• 通过strict:true可以开启严格模式（有利于初学者避免不规范代码，但是上线时不需要）
• mutations是仓库中的一个对象，其中存放修改state的方法

  • mutations:{
        addCount(state){
            state.count+=1
        }
    }

• 组件中提交调用mutations

  • this.$store.commit('addCount')

• 所有mutation函数，第一个参数都是state
• mutations实现实时输入，实时更新，巩固mutations传参语法
  • 输入框内容渲染
    • :value
  • 监听输入获取内容
    • @input
  • 封装mutation处理函数
    • mutation传参
  • 调用传参
    • commit调用

mapMutations

• 作用：将位于mutations中的方法提取出来，映射到组件methods中
• 

actions

• 用于处理异步操作（mutations必须是同步的，便于监测数据变化）
• 1.提供actions方法

  • actions:{
        setAsyncCount(context,num){
            setTIMEOUT(()=>{
                context.commit('changeCount',num)
            },1000)
        }
    }

• 2.调用

  • this.$store.dispatch('action名字',额外参数)

• 辅助函数mapActions
  • 

getters

• 类似于计算属性
• 除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters
• 1.定义getters

  • getter;{
        filterList(state){
            return state.list.filter(item=>item>5)
        }
    }

• 2.访问getters
  • 1.通过store访问getters
  • 2.通过辅助函数mapGetters映射