vue2新手笔记之vuex

53 阅读1分钟

vuex是什么

vue2中的状态管理仓库

vuex的五个核心

state

1. 什么是state

    定义数据 存储数据

2. mapState

    获取state中数据
   如何使用
       通过和 computed 结合
       方式一:computed 后面直接加 mapState
       方式二:在computed中 与扩展运算符结合使用(...mapState)
       方式一与方式二的区别在于 当comouted 中不仅限于 获取 mapState中数据时
       
       打印store到控制台,可以发现state是一个Object

mutation

什么是mutation

    更改数据的唯一方式
  如何使用
  参数:两个:第一个是state,获取state中存储的值,第二个传递过来的参数
  辅助函数 mapMutation

action

什么是action

    实现复杂异步操作
    核心
    context:可以理解为一个vuex实例,可以从上面获取到vuex中的数据和方法
    commit:提交给mutation
    dispatch:提交给action
    辅助函数:mapAction
    扩展运算符加mapAction进行提交
    

getter

什么是getter

    对state中的数据进行处理,数据简化
    辅助函数:mapGetter

module

如何在vue中怎么去使用vuex

1. 安装

  1. 使用npm安装
  2. @next 是什么意思
npm install vuex@next --save
  1. 使用pnpm安装
yarn add vuex@next --save

2. 创建store

3. 入口文件(main.js)引入

vuex模块化(module)使用

  1. 为什么使用模块化 当vue中的数据较多,不同功能模块的数据混杂,不利于开发和维护 namespace:命名空间,作用是在辅助函数中可以使用数据

暂时总结到这里,以上内容是学习中的总结和回顾,也有一些拿不定的地方,阅者自行斟酌