Vuex入门教程(详细篇)

最新推荐文章于 2024-08-13 08:16:58 发布
最新推荐文章于 2024-08-13 08:16:58 发布
阅读量3k 收藏 37
点赞数 16
文章标签： vue vue.js Vuex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44042074/article/details/107130815
版权

目录

1.Vuex是什么

Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。
在这里插入图片描述
当我们的应用遇到多个组件共享状态（数据）时，就可以用到Vuex了。

2.Vuex的使用

安装完VueX后，在项目的src目录下新建store文件夹，然后在store目录下新建index.js。（使用最新的Vue-CLI 4.x.x安装Vuex会自动配置好以下步骤）

在store/index.js中 导入 Vuex 包并创建 Store 对象

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: { 
  },
  mutations: {
  },
  actions: {
  },
  getters:{
  }
})

在main.js中将 store 对象挂载到 vue 实例中

import store from './store'

//.....

new Vue({
  render: h => h(App),
  // 将创建的共享数据对象，挂载到 Vue 实例中 
  // 所有的组件，就可以直接从 store 中获取全局的数据了 
  store,
}).$mount('#app')

3.Vuex的核心概念

Vuex 中的主要核心概念如下：

  • State
  • Mutation
  • Getter
  • Action

在上面的index.js中我们也可以看到一个Store对象就包含了这几个对象

3.1 State

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 state 中进行存储。

3.1.1创建数据
  export default new Vuex.Store({ 
    state: { num: 0 } 
  })

然后我们在组件中访问 state 中数据的有两种方式：

3.1.2访问数据的第一种方式
this.$store.state.全局数据名称 //访问刚刚创建的num就是 this.$store.state.num
3.1.3访问数据的第二种方式
// 1. 从 vuex 中按需导入 mapState 函数 
import { mapState } from 'vuex' 

//.....

// 2. 将全局数据，映射为当前组件的计算属性 
computed: { 
  ...mapState(['num']) 
}
3.1.4组件代码与效果图
<template>
  <div id="app">
    <h1>num : {{this.$store.state.num}}</h1><!-- this.$store.state.全局数据名称 -->
    <h1>num : {{num}}</h1>
  </div>
</template>

<script>
import { mapState } from "vuex"; //从 vuex 中按需导入 mapState 函数 
export default {
  name: "App",
  //将全局数据，映射为当前组件的计算属性 
  computed: {
    ...mapState(["num"])
  }
};
</script>

在这里插入图片描述

3.2 Mutation

  1. mutations 用于变更 Store中 的数据。
  2. 只能通过 mutations变更 Store 数据，不可以直接操作 Store 中的数据。
  3. 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
3.2.1定义Mutation
export default new Vuex.Store({
  state: { 
    num:0
  },
  mutations: {
    numAddOne(state){
      //num自增1
      state.num++;
    }
  }
})

和访问state数据一样，我们在触发mutations也有两种方式

3.2.2 触发Mutation的第一种方式
 methods:{
    addOne(){
       this.$store.commit('numAddOne')  //触发 mutations 的第一种方式 
    }
  }
3.2.3定义Mutation(带参数)
 mutations: {
    //n为参数
    numAddN(state,n){
      //num自增n
      state.num+=n;
    }
  },
3.2.3 触发Mutation的第二种方式
import {mapMutations } from "vuex";//从 vuex 中按需导入 mapMutations 函数

//...

methods:{
    ...mapMutations(['numAddN']),// 将指定的 mutations 函数，映射为当前组件的 methods 函数 
  }
3.2.4 组件代码与效果图
<template>
  <div id="app">
    <h1>num : {{this.$store.state.num}}</h1>  <!-- this.$store.state.全局数据名称 -->
    <button @click="addOne">+ 1</button>
    <h1>num : {{num}}</h1>
    <button @click="numAddN(3)">+ n</button>
  </div>  
</template>

<script>
import { mapState ,mapMutations } from "vuex";//从 vuex 中按需导入 mapMutations 函数
export default {
  name: "App",
  components: {},
  computed: {
    ...mapState(["num"])
  },
  data() {
    return {};
  },
  methods:{
    ...mapMutations(['numAddN']),// 将指定的 mutations 函数，映射为当前组件的 methods 函数 
    addOne(){
       this.$store.commit('numAddOne')  
    }
  }
};
</script>

在这里插入图片描述

3.3 Action

  1. Action 用于处理异步任务。
  2. 如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation的方式间接变更数据。
3.3.1定义Action
export default new Vuex.Store({
  state: {
    num: 0
  },
   mutations: {
    numAddOne(state) {
      //num自增1
      state.num++;
    }
  },
  actions: {
    numAddOneAsync(context) {
       setTimeout(() => {
          context.commit('numAddOne') 
        }, 1000) 
      }
  }
})
3.3.2 触发Action的第一种方式
 methods:{
    addOneAsync(){
       this.$store.dispatch('numAddOneAsync')//触发 Action 
    }
  }
3.3.3 定义Action(带参数)
export default new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    numAddN(state, n) {
      //num自增n
      state.num += n;
    }
  },
  actions: {
    //n为参数
    numAddNAsync(context,n) {
      setTimeout(() => {
        context.commit('numAddN',n)
      }, 1000)
    }
  }
})
3.3.4 触发Action的第二种方式
//从 vuex 中按需导入 mapActions 函数 
import { mapActions } from 'vuex' 

//.....

//将指定的 actions 函数，映射为当前组件的 methods 函数
methods: { 
  ...mapActions(['numAddNAsync']) 
}
3.3.4 组件代码与效果图
<template>
  <div id="app">
    <h1>num : {{this.$store.state.num}}</h1>  <!-- this.$store.state.全局数据名称 -->
    <button @click="addOne">+ 1</button>
    <br>
     <button @click="addOneAsync">+ 1 Async</button>
    <h1>num : {{num}}</h1>
    <button @click="numAddN(3)">+ n</button>
    <br>
    <button @click="numAddNAsync(3)">+ n Async</button>
  </div>  
</template>

<script>
import { mapState ,mapMutations ,mapActions } from "vuex";//从 vuex 中按需导入 mapXXXX 函数
export default {
  name: "App",
  components: {},
  computed: {
    ...mapState(["num"])
  },
  data() {
    return {};
  },
  methods:{
    ...mapActions(['numAddNAsync']) ,//将指定的 actions 函数，映射为当前组件的 methods 函数 
    ...mapMutations(['numAddN']),// 将指定的 mutations 函数，映射为当前组件的 methods 函数 
    addOne(){
       this.$store.commit('numAddOne')  //触发Mutation
    },
    addOneAsync(){
       this.$store.dispatch('numAddOneAsync')//触发 Action 
    }
  }
};
</script>

在这里插入图片描述

3.4 Getter

  1. Getter 用于对 Store 中的数据进行加工处理形成新的数据。
  2. Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性 。
  3. Store 中数据发生变化，Getter 的数据也会跟着变化。
3.4.1 定义 Getter
export default new Vuex.Store({
  state: {
    num: 0
  },
  getters: {
  	//定义Getter 
    NumText(state ){
      return  '当前的num值为: '+ state.num 
    }
  }
})
3.4.2 使用Getter
使用 getters 的第一种方式
this.$store.getters.名称 //这里就是 this.$store.getters.NumText
使用 getters 的第二种方式
import { mapGetters } from 'vuex' 

 //.....
 
computed: { 
  ...mapGetters(['NumText']) 
}
3.3.4 组件代码与效果图
<template>
  <div id="app">
    <h1>{{this.$store.getters.NumText}}</h1>  <!-- this.$store.getters.名称 -->
    <button @click="addOne">+ 1</button>
    <br>
     <button @click="addOneAsync">+ 1 Async</button>
    <h1>{{NumText}}</h1>
    <button @click="numAddN(3)">+ n</button>
    <br>
    <button @click="numAddNAsync(3)">+ n Async</button>
  </div>  
</template>

<script>
import { mapState ,mapMutations ,mapActions,mapGetters  } from "vuex";//从 vuex 中按需导入 mapXXXX 函数
export default {
  name: "App",
  components: {},
  computed: {
    ...mapState(["num"]),
    ...mapGetters(['NumText']) 
  },
  data() {
    return {};
  },
  methods:{
     ...mapActions(['numAddNAsync']) ,//将指定的 actions 函数，映射为当前组件的 methods 函数 
    ...mapMutations(['numAddN']),// 将指定的 mutations 函数，映射为当前组件的 methods 函数 
    addOne(){
       this.$store.commit('numAddOne')  //触发Mutation
    },
    addOneAsync(){
       this.$store.dispatch('numAddOneAsync')//触发 Action 
    }
  }
};
</script>

在这里插入图片描述

目前正在学习前端,微信小程序…欢迎关注，一起学习！！！

摸鱼moyv
关注
vuex的入门教程
qq_45018844的博客
09-06 344
vuex的结构 vuex官网 基本掌握这四个即可，后续通过做项目实战进阶 开始使用 1. 创建一个vue项目 2. 安装vuex npm install vuex --save 3. 新建store目录，创建一个index.js 4. index.js中写入基本结构 import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex) export default new Vuex.Store({ state :{}, get
最详细的Vuex教程
weixin_30325487的博客
07-19 1470
原文链接http://blog.csdn.net/h5_queenstyle12/article/details/75386359 最详细的Vuex教程 什么是Vuex？ vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。 引入Vuex（前提是...
Vaex 开源项目教程
最新发布
gitblog_00643的博客
08-13 759
Vaex 开源项目教程 vaexVaex 是一个高性能的大规模数据分析库，适用于大规模数据集的探索和分析，如天文学、物理学、生物学等领域。* 高效处理大规模数据集；支持数据筛选、聚合、排序等操作；支持 Python 和 Jupyter Notebook。* 特点：高性能；支持多种数据格式；支持 Python 和 Jupyter Notebook。项目地址:https://gitcode.com/...
vuex教程
shaleilei的博客
08-13 592
Vuex简介 什么是vuex: vuex是一个把多个组件通用的数据 我们把它拿出来，然后放到一个store里面管理，在需要使用的组件里面，我们可以拿出来使用 关于store store基本上就是一个容器，包含着你的应用中大部分的状态（state） 关于state state就是我们项目全局通用的data的属性，并且这些属性是响应式的，也就是当属性发生改变时，state也会回动...
Vuex详细教程
鸟哥哥的专栏
08-16 1228
Vuex详细教程
vuex使用教程--入门篇
qq_45774645的博客
06-10 2961
按照官网的说法，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vue中Vuex入门教程：快速掌握状态管理
"这篇教程介绍了如何分分钟学会在Vue项目中使用Vuex进行状态管理，包括Vuex的基本概念、核心组件以及如何实现一个简单的购物车加减功能的示例。" 在Vue.js开发中，当应用程序变得复杂，多个组件之间需要共享状态时...
Vuex入门教程：配置与状态管理
通过这篇文章，我们将深入理解如何简单使用Vuex。 首先，按照官方推荐，我们需要在项目src目录下创建一个名为`store`的目录。这个目录将存放所有的Vuex相关文件，以便组织和管理应用的状态。 1. **创建store目录**...
Vue.js实战之Vuex的入门教程
12-11
在 Vue.js 的项目中，如果项目结构简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式，详细点击这篇文章查看。 但是如果是大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便...
Vuex新手入门教程：快速掌握状态管理
"这篇文章是关于新手如何快速上手Vuex的指南，重点在于理解Vuex的基本概念和使用方法，通过示例代码帮助学习者更好地掌握Vuex在实际项目中的应用。" Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用...
Vuex提升学习篇
01-19
如果本篇有看不明白的地方，请移步上一篇：Vuex 入门 上一篇我们讲了如何通过一些简单的动作来改变 store.js 中的数据对象，在实际工作中，这是完全无法满足工作需求的，所以这篇我们来说说如何做一些简单的流程...
VUEX入门教程
weixin_43989275的博客
04-29 358
首先，新建一个vue项目，在命令行中使用：vue init webpack web 然后，安装vuex，使用命令：npm install vuex --save 出现以下代码提示显示安装成功： 首先，我们在src目录下新建文件夹 store，在当前文件夹中新建文件index.js 在当前的index.js文件中，我们在文件中引用入ue和vuex，在vue中注册vuex，创建vuex.Stor...
vuex 入门详解（一）
weixin_34306446的博客
07-27 306
如果你在使用vue.js, 那么我想你可能会对 vue 组件之间的通信感到崩溃 。 我在使用基于 vue.js 2.0 的UI框架ElementUI开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 : <!--父组件中引入子组...
Vuex 快速入门 简单易懂
weixin_34306593的博客
09-19 170
2019独角兽企业重金招聘Python工程师标准>>> ...
vuex入门教程
java技术博客
03-26 561
vuex入门教程 参考网址: https://mp.weixin.qq.com/s/rs2xAvsY8SYtrMchz88dlQ 说明 vuex 对于 vue 来说 , 也是很重要的组件 , 但是项目是否使用 vuex 看情况而定 , 不是为了使用 vuex 而使用 vuex vuex , vue-router , axios 基本都是 vue-cli 中必不可少的组件 , 加上 UI 组件 element-ui , 基本就可以完成一个简单的项目了 这篇文章很好的介绍了 vuex 的使用 , 通俗易懂
Vuex入门教程
yh604005215的博客
05-04 480
一、vuex是什么 vue官方提供的状态管理器。用于处理全局的数据共享问题的。 二、vuex的仓库中的几个核心概念 state vuex中的数据源，专门存共享数据的地方。 getter 可以针对现有的 state 数据或者其余的 getter 做的一个二次计算，可以理解为仓库的计算属性。 mutation 唯一能够修改 state 数据的东西，不允许写异步代码。 action 它里面可以...
Vuex得详细教程
m0_52553037的博客
02-25 634
一.了解Vuex Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用得所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 单向数据流的概念 二.下载 npm install vuex@next --save 需要的地方引入 <script src="./node_modules/vue/dist/vue.js"></script> <script src="./node_modules/vuex/...
【Vue】-- Vuex简单入门教程
qq_48802092的博客
10-06 637
​ 简单来说，Vuex就是一个状态机，采用集中式存储帮助我们管理所有组件的共享状态，可以用来解决多组件数据通信，可以把vuex理解成一个仓库，假设有A、B两个组件需要通信传值，那么可以把A组件和B组件的数据放到Vuex中， A组件想要获取B组件数据从vuex中拿 B组件想要获取A组件的数据从Vuex拿。 ​
超详细，Vuex手把手教程
鹏多多的博客
07-26 1082
目录1，前言2，Vuex 是什么3，5大属性说明4，详细介绍4.1，state4.2，getters4.3，Mutation4.4，Action 1，前言 最近在重温vue全家桶，再看一遍感觉记忆更深刻，所以专门记录一下。 2，Vuex 是什么 Vuex是专为Vue.js开发的状态管理模式。它采用集中式存储，管理所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化（我的理解就是全局变量）。 3，5大属性说明 state 对象类型，类似于实例的 data属性，存放数据 getters 对象类
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值