专栏首页黑马【Vue_06】VueX

【Vue_06】VueX

一、Vuex 概述

1. 什么是 Vuex

1.Vuex 是为 Vue.js 应用程序开发的状态管理模式。采用集中式存储管理应用所有组件的状态,并以相应的规则保证状态以可预测的方式发生变化。 2.能够在vuex中集中管理共享的数据,便于开发和后期进行维护。 3.能够高效的实现组件之间的数据共享,提高开发效率。 4.存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新。

2. Vuex 的基本使用

  • 安装
npm install vuex --save
  • 创建 store.js 文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 数据
  },
  // 只有 mutations 中定义的函数,才有权利修改 state 中的数据
  mutations: {
	// 方法
  },
  actions: {
    methodAsync(context) {
     	// 异步操作
    },
  },
  getters: {
	// 数据加工
  }
})
  • 将 store 挂载到 Vue 实例
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

二、Vuex 核心

1. state

2. Mutation

3. Action

4. Getter

Getter 是什么

Getter 用于对 Store 中的数据进行加工处理形成新的数据,它只会包装 Store 中保存的数据,并不会修改 Store 中保存的数据。 当 Store 中的数据发生变化时,Getter 生成的内容也会随之变化

Getter 的使用方式

// 在 store.js 中添加 getter 属性
getters:{
	//添加了一个属性
	属性名 : state => {
		return "修饰后的内容";
	}
}


/*
	方式一
*/
// 在对应 vue 组件中使用以下方式
this.$store.getters.属性名

/*
	方式二
*/
// 1. 在对应 vue 组件中引入 mapGetter
import { mapGetters } from 'vuex'
// 2. 将 Getter 属性映射为 计算属性
computed:{
  ...mapGetters(['showNum'])
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vuex 快速入门 简单易懂

    5. 一个 Vuex 应用的核心是 store(仓库,一个容器),store包含着你的应用中大部分的状态 (state)。

    王念博客
  • 了解Vuex状态管理模式的理解强化指南

    Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状...

    达达前端
  • 了解Vuex状态管理模式的理解强化指南

    Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状...

    桃翁
  • vuex基础

    Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状...

    达达前端
  • vuex基础入门

    vuex是一个专门为vue.js应用程序开的状态管理模式 它采用集中式存储管理应用的所有组件的状态 并以相应的规则保证以一种可预测的方式发生变化

    达达前端
  • (Vue全家桶)Vue-vuex

    vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。

    楠楠
  • 真正掌握vuex的使用方法(一)

    咱们知道,vue项目当中的父子组件的交互是单通道传递,父组件通过props向子组件传递参数,而在子组件当中不不能直接修改接收的参数,而是需要通过自定义事件的方式...

    用户1272076
  • Vuex的简单入门

    在src目录下新建个store文件夹,里面新建index.js 在index.js文件夹中创建Vuex实例

    明知山
  • 状态管理之Vuex (一) 基操勿六

    Vuex是对状态的管理, 这里的状态所指的就是data。 以前我们的组件通信一直是个问题,例如兄弟组件通信,这个时候就比较难办,如果使用Vuex就可以很轻松的解...

    憧憬博客
  • Vuex 映射完全指南

    Vuex 是一把双刃剑。如果使用得当,Vue 可以使你的工作更加轻松。如果不小心,也会使让的代码混乱不堪。

    疯狂的技术宅
  • Vuex是什么?Vuex能做什么?Vuex怎么使用?

    前段时间,有小伙伴问我,Vuex是怎么玩儿的?也是一直没有机会,趁着今天有空,一起来学习一波。

    Javanx
  • 浅析Vuex及相关面试题答案

    自从学习了Vue框架,其中必不可少的会用到vuex这个核心插件,而且在做项目的时候,基本都会使用,可能你会使用vuex状态管理,但是对vuex原理存在着或多或少...

    前端开发博客
  • 33、vuex初探(一)

    看完以后应该是有点懵逼的,所以这就是这篇文章存在的意义了:就是让你不那么懵逼;总归理论与实践相结合才能真正弄明白一个东西,所以我们简单实践一下。

    Ewall
  • Vuex

    在相对独立的组件中,action -> state -> view的单向数据流能得到保证。而真实业务场景经常需要状态传递及共享,一般方法是:

    ayqy贾杰
  • Vuex

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 V...

    河湾欢儿
  • vuex

    问题1:通过路由传递参数,我们会采用params或者query形式,但这两种方式都会在URL上做手脚,如果传递的参数过多,会导致400 Bad Request(...

    奋飛
  • Vuex状态管理总结

    3、Vuex 应用的核心是 store(仓库)-- 包含 state(组件中的共享状态)和 mutations(改变状态的方法)

    Leophen
  • Vuex 4 正式发布:打包现在与 Vue 3 一致

    Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。Vuex 采用集中式存储管理应用的所有组件组件的状态。换句话说,Vuex 就是帮开发者存储多个...

    @超人
  • 轻松理解vuex的运用及常见面试问题

    Vue的核心是数据驱动和组件化开发,无论是组件的封装还是组件的传参,都是面试中最常见的问题,也难倒了无数面试者,以下就跟大伙分享分享当vue 组件之间的通信感...

    用户1272076

扫码关注云+社区

领取腾讯云代金券