Vuex使用

无敌的黑星星

于 2024-02-15 18:18:09 发布

阅读量429

点赞数 8

文章标签：前端 javascript 开发语言 vuex

本文链接：https://blog.csdn.net/qq_41848006/article/details/136122190

版权

本文详细介绍了Vuex的使用，包括State的创建与使用、无参数与带参数的Getters、无载荷和有载荷的Mutations以及Action的创建与应用，强调了Vuex在前端开发中的重要角色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vuex

一、概述

二、State

存放状态的

1、创建state

const state = {
   
  title: '我是一个标题',
  content: '今天的天气是好的',
  age: 2,
};

2、使用

直接在页面直接使用

//非模块化写法
<div>{
    { $store.state.title }}</div>
//模块化写法
<div>{
    { $store.state.about.title }}</div>

通过计算属性获取

computed: {
     
    getTitle() {
     
      //非模块化写法
      return this.$store.state.title
       //模块化写法：about是模块名
      return this.$store.state.about.title
    }
}

在页面使用

<div>{
    { getTitle }}</div>

在计算属性中通过mapState辅助函数获取（推荐使用）
- 如果store不是模块化的：
```
computed: {
     
	...mapState(['title', 'content', 'age'])
}
```
- 如果store是模块化的：
```
computed: {
     
	...mapState('about', [
```