从0开始搭建基于VUE的前端项目(三) Vuex的使用与配置

准备与版本

  1. vuex 3.6.2(https://v3.vuex.vuejs.org/zh/

概念

  1. vuex是什么?
    是用作 【状态管理】的
    流程图如下在这里插入图片描述

  2. state 数据状态,成员是个对象
    mapState
    组件使用this.$store.state.xxx获取state里面的数据

  3. getters 成员是个函数,方便获取state里面的数据,也可以加工数据
    mapGetters
    组件使用this.$store.getters.xxx获取state里面的数据

  4. mutations 成员是个函数,修改state里面的数据
    mapMutations
    组件使用this.$store.commit(‘方法名称’), 提交要修改的数据

  5. actions 成员是个函数,修改state里面的数据,可写异步的方法
    mapActions
    组件使用this.$store.dispatch(‘方法名称’), 分发要修改的数据

  6. modules 成员是个对象,里面包含(state、getters、mutations、actions),由于业务比较复杂,可分模块管理状态,每个模块都有自己的state、getters、mutations、actions,特别注意的是 state是个函数
    在这里插入图片描述

安装

安装要指定版本,默认安装的4版本的

npm install vuex@3.6.2

代码实现

  1. 在src目录下创建以下
    store/index.js
    store/modules/
    在这里插入图片描述
    2) src/store/index.js代码
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
   
  state: {
   
    testCount: 

相关推荐

  1. vue项目---1.基础框架

    2024-04-01 14:38:01       35 阅读
  2. webpack开始vue项目

    2024-04-01 14:38:01       76 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-01 14:38:01       5 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-01 14:38:01       5 阅读
  3. 在Django里面运行非项目文件

    2024-04-01 14:38:01       4 阅读
  4. Python语言-面向对象

    2024-04-01 14:38:01       6 阅读

热门阅读

  1. Spring与Spring Boot的区别

    2024-04-01 14:38:01       21 阅读
  2. 修改aws账户的密码和MFA

    2024-04-01 14:38:01       21 阅读
  3. 【力扣】374.猜数字大小

    2024-04-01 14:38:01       22 阅读
  4. RuoYi-Vue-Plus(登录流程)

    2024-04-01 14:38:01       22 阅读
  5. css去除滑动框

    2024-04-01 14:38:01       22 阅读
  6. pgsql已有表设置主键自增

    2024-04-01 14:38:01       22 阅读
  7. C语言点h文件设置

    2024-04-01 14:38:01       25 阅读
  8. C++常见算法有哪些

    2024-04-01 14:38:01       23 阅读
  9. 东北大学软件学院计算机网络专业课-第一章总结

    2024-04-01 14:38:01       22 阅读