Vuex项目 state mutations actions getters Module（学习与使用）

最新推荐文章于 2024-07-25 11:00:49 发布
最新推荐文章于 2024-07-25 11:00:49 发布
阅读量575 收藏
点赞数
分类专栏： 学习 Vuex 文章标签： vue.js javascript 前端 vuex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44680550/article/details/122312807
版权
学习 同时被 2 个专栏收录
66 篇文章 2 订阅
订阅专栏
Vuex
2 篇文章 0 订阅
订阅专栏

Vuex（学习与使用）

简介

非关系型组件的数据共享 - Vuex（状态共享框架）
Vuex 是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享的问题

  • state - 存储共享状态数据，可以在组件中引用
  • mutations - 修改 state 必须通过 mutations ，只能执行同步代码，类似 ajax ，定时器之类的代码不能在 mutations 中执行
  • actions - 执行异步操作，数据提交给 mutations 进行修改
  • 组件 - 组件调用 action

步骤

  1. 创建项目
    在这里插入图片描述
// vue 命令
vue create demo
  1. 选择模式
    在这里插入图片描述
  2. 下载相关依赖
    在这里插入图片描述
    在这里插入图片描述
// 运行时依赖，命令二选一
// npm i vuex --save
npm i vuex -S
  1. 初始化及注册
    在这里插入图片描述
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'

Vue.config.productionTip = false

Vue.use(Vuex)

const store = new Vuex.Store({})

new Vue({
  render: h => h(App),
  store // es6写法
}).$mount('#app')

Vuex - state

state 是存放所有公共状态的属性

定义

在这里插入图片描述

const store = new Vuex.Store({
  // 实例化Vuex的构造参数 state mutations actions
  state: {
    // 存储的状态
    count: 0
  }
})

使用 - 原始形式

在这里插入图片描述

// src/App.vue
<template>
  <div>
    <!-- 原始形式应用 -->
    <div>原始形式获取state状态：{{ $store.state.count }}</div>
  </div>
</template>

<script>
export default {}
</script>

<style></style>

// 项目启动命令
npm run serve

【如果项目启动报错，看 package.json 中的命令配置】
在这里插入图片描述

效果

在这里插入图片描述

使用 - 计算属性

  • 使用
    在这里插入图片描述
// src/App.vue
<template>
  <div>
    <p>计算属性状态：{{ count }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
</script>
  • 效果
    在这里插入图片描述

使用 - 辅助函数（ mapState ）

mapStatus - 辅助函数，用于把 store 中的数据映射到组件的计算属性中，属于一种简便用法

  • 步骤
    在这里插入图片描述
// src/App.vue
<template>
  <div>
    <p>计算属性状态：{{ count }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex' // 导入mapState
export default {
  computed: {
    // 利用延展运算符将导出的状态映射给计算属性
    ...mapState(['count'])  // 采用数组形式引入state属性
  }
}
</script>
  • 效果
    在这里插入图片描述

Vuex - mutations

state 数据的修改只能通过 mutations，并且 mutations 必须是同步更新，目的是形成 数据快照
数据快照 - 一次 mutation 的执行，立即得到一种视图状态，因为是立即，所有必须是同步定义 mutation
不能写异步代码，如果有异步的 ajax 请求，应放到 actions 中

使用 - 原始形式

组件内使用

步骤

在这里插入图片描述

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex' // 引入

Vue.config.productionTip = false

Vue.use(Vuex) // 注册 Vuex 的功能

// 实例化一个Vuex
const store = new Vuex.Store({
  // 实例化Vuex的构造参数 state mutations actions
  state: {
    // 存储的状态
    count: 0
  },
  mutations: {
    addCount (state) {
      state.count += 1
    },
  }
})

在这里插入图片描述

// src\components\chila-a.vue
<template>
  <button @click="test">+1</button>
</template>

<script>
export default {
  methods: {
    test () {
      this.$store.commit("addCount")
    }
  }
}
</script>

在这里插入图片描述

// src\App.vue
<template>
  <div>
    <div>原始形式获取state状态：{{ $store.state.count }}</div>
    <p>计算属性状态：{{ count }}</p>
    <ChildA />
  </div>
</template>

<script>
import { mapState } from 'vuex' // 导入mapState
import ChildA from './components/chila-a.vue'
export default {
  components: {
    ChildA,
  },
  computed: {
    // 利用延展运算符将导出的状态映射给计算属性
    ...mapState(['count'])  // 采用数组形式引入state属性
  }
}
</script>

效果

在这里插入图片描述

使用 - 原始形式（传参）

代码

在这里插入图片描述

// src\main.js
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex' // 引入

Vue.config.productionTip = false

Vue.use(Vuex) // 注册 Vuex 的功能

// 实例化一个Vuex
const store = new Vuex.Store({
  state: {
    // 存储的状态
    count: 0
  },
  // 修改state必须通过mutations
  mutations: {
    // 修改state的mutation方法
    addCount (state, payload) {
      state.count += payload
    },
  }
})

new Vue({
  render: h => h(App),
  store // es6写法
}).$mount('#app')


// src\components\chila-a.vue
<template>
  <button @click="test">+10</button>
</template>

<script>
export default {
  methods: {
    test () {
      this.$store.commit("addCount", 10)
    }
  }
}
</script>

效果

在这里插入图片描述

使用 - 辅助函数（mapMutations）

代码

在这里插入图片描述

// src\components\chila-a.vue
<template>
  <div>
    <button @click="test">+1(原始形式)</button>
    <!-- vue 中方法的默认第一个参数，事件参数对象 -->
    <button @click="addCount(100)">+100(辅助函数)</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  methods: {
    // 原始方式调用
    test () {
      this.$store.commit("addCount", 1)
    },
    ...mapMutations(['addCount']) // 此时组件方法中就会拥有一个对应的addCount方法
  }
}
</script>

效果

在这里插入图片描述
【扩展】使用 $event 事件参数对象
代码
在这里插入图片描述

// src\components\chila-a.vue
<button @click="addCount($event)">+100(辅助函数)</button>

效果
在这里插入图片描述

Vuex - actions

state 是存放数据的，mutations 是同步更新数据，actions 则负责进行异步操作

定义

在这里插入图片描述

// src\main.js
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex' // 引入

Vue.config.productionTip = false

Vue.use(Vuex) // 注册 Vuex 的功能。 Vue.use的方法实际上是调用了 Vuex 中的一个 install 的方法

// 实例化一个Vuex
const store = new Vuex.Store({
  state: {
    // 存储的状态
    count: 0
  },
  // 修改state必须通过mutations
  mutations: {
    // 修改state的mutation方法
    addCount (state, payload) {
      state.count += payload
    },
  },
  // 异步操作
  actions: {
    // 方法
    getAsyncCount (context) {
      // 模拟异步请求
      setTimeout(function () {
        // 获取到一个值
        context.commit("addCount", 123)
      }, 1000)
    },
  }
})

new Vue({
  render: h => h(App),
  store // es6写法
}).$mount('#app')

使用 - 原始调用

步骤

在这里插入图片描述

// src\components\chila-a.vue
<template>
  <div>
    <button @click="test1">异步调用(原始形式)</button>
  </div>
</template>

<script>
export default {
  methods: {
    test1 () {
      // 原始形式
      this.$store.dispatch('getAsyncCount')
    },
  }
}
</script>

效果

在这里插入图片描述

使用 - 原始调用（传参）

步骤

在这里插入图片描述

// src\main.js
actions: {
    getAsyncCount (context, params) {
      // 做异步的请求
      setTimeout(function () {
        // 获取到一个值
        context.commit("addCount", params)
      }, 1000)
    },
  }

// src\components\chila-a.vue
methods: {
    test1 () {
      this.$store.dispatch('getAsyncCount', 111)
    },
  }

效果

在这里插入图片描述

使用 - 辅助函数

将 action 导入数组中

步骤

在这里插入图片描述

// src\components\chila-a.vue
<template>
  <div>
    <button @click="getAsyncCount(222)">异步调用(辅助函数)</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  methods: {
    test1 () {
      // 原始形式
      // commit 是提交 mutations
      // dispatch 调用 action
      // dispatch(action的名称)
      this.$store.dispatch('getAsyncCount', 111)
    },
    ...mapActions(['getAsyncCount'])  // 引入异步的 action
  }
}
</script>

效果

在这里插入图片描述

Vuex - getters

除了 state 之外，有时我们还需要从 state 中派生出一些状态，这些状态是依赖 state 的（需要再异一步进行处理），所以会用到 getters

定义

在这里插入图片描述

// src\main.js
const store = new Vuex.Store({
  state: {
    // 存储的状态
    count: 0,
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
  getters: {
    // 放置的所有的Vuex的计算属性
    // state：当前 store 中的 state
    // filterList: function (state) {
    //   return state.list.filter(item => item > 5)
    // },
    filterList: state => state.list.filter(item => item > 5)
  },
})

使用 - 原始形式

步骤

在这里插入图片描述

// src\components\chila-a.vue
<template>
  <div>
    <div>原始形式getters: {{ $store.getters.filterList }}</div>
  </div>
</template>

效果

在这里插入图片描述

使用 - 辅助函数（mapGetters）

步骤

在这里插入图片描述

// Asrc\components\chila-a.vue
<template>
  <div>
    <div>原始形式getters: {{ $store.getters.filterList }}</div>
    <div>辅助形式getters: {{ filterList }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    // 将getters中的计算属性导入到组件的计算属性中
    ...mapGetters(['filterList'])
  },
}
</script>

效果

在这里插入图片描述

Vuex - Module(模块化)

使用 - 简单应用

定义

在这里插入图片描述

// src\main.js
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex' // 引入

Vue.config.productionTip = false

Vue.use(Vuex) // 注册 Vuex 的功能

// 实例化一个Vuex
const store = new Vuex.Store({
  modules: {
    // 放置子模块的属性
    user: {
      state: {
        token: '12345'
      },
    },
    setting: {
      state: {
        name: 'Vuex实例'
      },
    }
  }
})

new Vue({
  render: h => h(App),
  store // es6写法
}).$mount('#app')

步骤

$store.state.子模块.属性

在这里插入图片描述

// src\components\chila_b.vue
<template>
  <div>
    <!-- $store.state.子模块.属性 -->
    <div>用户名称：{{ $store.state.user.token}}</div>
    <div>应用名称： {{ $store.state.setting.name}}</div>
  </div>
</template>

在这里插入图片描述

// src\App.vue
<template>
  <div>
    <ChildA/>
    <child-b/>
  </div>
</template>

<script>
import ChildA from './components/chila-a.vue'
import ChildB from './components/chila_b.vue'
export default {
  components: {
    ChildA,
    ChildB,
  },
}
</script>

效果

在这里插入图片描述

mapGetters 引用

这个 getters 是根级别的 getters

步骤

在这里插入图片描述

// src\main.js
const store = new Vuex.Store({
  getters: {
    token: state => state.user.token,
    name: state => state.setting.name,
  },
  modules: {
    // 放置子模块的属性
    user: {
      state: {
        token: '12345'
      },
    },
    setting: {
      state: {
        name: 'Vuex实例'
      },
    }
  }
})

在这里插入图片描述

// src\components\chila_b.vue
<template>
  <div>
    <!-- 用户的token和应用名称name -->
    <!-- $store.state.子模块.属性 -->
    <div>用户名称：{{ $store.state.user.token}}</div>
    <div>快捷访问： {{ token }}</div>
    <div>应用名称： {{ $store.state.setting.name}}</div>
    <div>快捷访问： {{ name }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['token', 'name'])
  }
}
</script>

效果

在这里插入图片描述

使用 - 命名空间（namespaced）

默认情况下，模块内部的 action、mutation 和 getter 是注册在 全局命名空间的 —— 这样可以使多个模块能对同一 mutation 或 action 做出响应。
如果想保证内部模块的高封递性，可以采用 namespaced 来进行设置。

命名空间 - 直接调用（带上模块的属性名路径）

步骤

在这里插入图片描述

// src\main.js
modules: {
    // 放置子模块的属性
    user: {
      namespaced: true, // 给true就表示枷锁
      state: {
        token: '12345'
      },
      mutations: {
        updateToken (state) {
          state.token = '67890'
        }
      },
      actions: {}
    },
    setting: {
      state: {
        name: 'Vuex实例'
      },
    }
  }

在这里插入图片描述

// An highlighted block
<template>
  <div>
    <!-- 用户的token和应用名称name -->
    <!-- $store.state.子模块.属性 -->
    <div>用户名称：{{ $store.state.user.token}}</div>
    <div>快捷访问： {{ token }}</div>
    <div>应用名称： {{ $store.state.setting.name}}</div>
    <div>快捷访问： {{ name }}</div>
    <button @click="updateToken">更新子模块的token</button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['token', 'name'])
  },
  methods: {
    updateToken() {
      // 采用路径形式 - 直接调用
      this.$store.commit('user/updateToken')
    }
  }
}
</script>
效果

在这里插入图片描述

命名空间 - 辅助函数（-带上模块的属性名路径）

步骤

在这里插入图片描述

// src\components\chila_b.vue
<template>
  <div>
    <!-- 用户的token和应用名称name -->
    <!-- $store.state.子模块.属性 -->
    <div>用户名称：{{ $store.state.user.token}}</div>
    <div>快捷访问： {{ token }}</div>
    <div>应用名称： {{ $store.state.setting.name}}</div>
    <div>快捷访问： {{ name }}</div>
    <button @click="updateToken">更新子模块的token</button>
    <button @click="test">子模块的mutations辅助函数</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapGetters(['token', 'name'])
  },
  methods: {
    updateToken() {
      // 采用路径形式 - 直接调用
      this.$store.commit('user/updateToken')
    },
    ...mapMutations(['user/updateToken']),
    test() {
      this['user/updateToken']()
    }
  }
}
</script>
效果

在这里插入图片描述

命名空间 - espacedHelpers（创建基于某个命名空间辅助函数）

步骤

在这里插入图片描述

// src\components\chila_b.vue
<template>
  <div>
    <!-- 用户的token和应用名称name -->
    <!-- $store.state.子模块.属性 -->
    <div>用户名称：{{ $store.state.user.token}}</div>
    <div>快捷访问： {{ token }}</div>
    <div>应用名称： {{ $store.state.setting.name}}</div>
    <div>快捷访问： {{ name }}</div>
    <button @click="updateToken">更新子模块的token</button>
  </div>
</template>

<script>
import { mapGetters, createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')
export default {
  computed: {
    ...mapGetters(['token', 'name'])
  },
  methods: {
    ...mapMutations(['updateToken']),
  }
}
</script>
效果

在这里插入图片描述

259-aaa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue3/ Vuex内函数 state mutations actions getters module 使用方法和介绍
m0_64494670的博客
02-24 687
Vue3/ Vuex内函数 state mutations actions getters module 使用方法和介绍
Vue Vuex中State， Mutations，Actions，Getters使用详解
程序猿小白的博客
11-05 5866
Vuex 的详细介绍请查看官方文档 ：https://vuex.vuejs.org/zh/ 前言：写这个教程的原因是自己和 Vuex 打交道的时候踩过很多坑，所以记录一下学习的过程，还有是官方的教程真的是太官方了，对我这种小菜鸟来说不是那么的通俗易懂。 1、Vuex 是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 也集成到 Vue 的官方调试工具devtools ex..
Vuex学习二：Vuex的重点属性学习，state、mutations、getters、actions、module。
冯安晨
04-14 548
文章目录前言一、State单一状态树二、Getters基本使用1. 描述和案例2. 案例代码三、Mutations1. Mutations状态更新2. Mutations传递参数i、概念ii、代码示例3. Mutations提交风格4. Mutations响应规则i、概念ii、代码案例5. Mutations常量类型i、概念ii、代码示例6. Mutations同步函数四、Action的基本定义1. 概念2. 代码示例五、modules1. 描述2. Modules局部状态3. Actions的写法4. 代
VueX的state、mutations、actions、getters的学习
weixin_43288858的博客
07-09 281
Vuex 概述 官方文档：https://vuex.vuejs.org/zh/ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状 态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex简单理解： Vue 应用中的每个组件在 data() 中封装着自己数据属性，而这些 data 属性都是私有的，完全隔离的。 如果我们希望多个组件都能读取到同一状态数据属性，或者不同组件的行为需要更新同一状态数据属 性， 这就需要一个将共享的状态数据属性进行集中式
vuex操作state对象的实例代码
08-27
Vuex 的核心概念包括 state、getters、mutations、actions 和 modules，它们共同构建了一个强大的状态管理系统。 1. State State 是 Vuex 中的基本数据，它存储了应用的全局状态。在一个 Vuex 应用中，所有的状态都...
vuex学习的小例子，包含所有的State、Getter、Mutation、Action、Module的使用
03-15
在这个“vuex学习的小例子”中，我们将深入理解Vuex的核心概念：State、Getter、Mutation、Action以及Module。 **State** 在Vuex中，State是存储应用全局状态的地方。所有组件都可以访问这些状态，但直接修改State...
weex里Vuex state使用storage持久化详解
12-09
在使用`storage`模块持久化Vuex的state时，首先需要引入这个模块： ```javascript const storage = weex.requireModule('storage') ``` 然后，定义你的Vuex state，例如： ```javascript var state = { banner: ...
浅谈super-vuex使用体验
08-27
Super-Vuex 使用体验详解 Super-Vuex 是一种用于简化 Vuex 的数据架构解决方案。Vuex 是一个常用的状态管理工具，但是在实际应用中存在一些问题，如数据共享、业务接口分离、数据模块化管理等。Super-Vuex 正是为了...
Vuex框架原理与源码分析
01-27
Vuex 支持模块化配置，允许你将 state 分割成独立的模块，每个模块有自己的 state、mutations、actions 和 getters。在 `module` 目录下的代码实现了模块化管理和嵌套，每个模块可以有独立的命名空间，避免了命名...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 458
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 264
Python Formulas库，JSON格式导出导入。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 293
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
前端三大主流框架Vue React Angular有何不同？
2401_85955297的博客
07-21 1448
前端三大主流框架Vue React Angular比较，前端三大主流框架Vue React Angular有何不同？
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 246
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）
最新发布
m0_71835253的博客
07-25 407
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）_vue在打开一个界面的时候隐藏侧边栏-CSDN博客
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 254
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
VUE中的重点*
qq_61132537的博客
07-22 971
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue的模板编译：深入理解渲染函数与预编译模板
哎 你看的博客
07-22 1074
Vue.js 是一个用于构建用户界面的渐进式框架，它的核心特性之一是其响应式和声明式的模板语法。Vue 的模板不仅仅是简单的字符串插值，它们会被编译成渲染函数，这个过程涉及到将模板字符串转换成 JavaScript 代码。本文将深入探讨 Vue 的模板编译过程，并讨论如何使用预编译模板来提高应用性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

259-aaa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值