理解Vuex

最新推荐文章于 2024-09-19 11:54:01 发布
最新推荐文章于 2024-09-19 11:54:01 发布
阅读量157 收藏
点赞数
分类专栏： vue 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bubbleJessica/article/details/131704893
版权

Vuex是什么

专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

Vuex Github地址 

什么时候使用Vuex

多个组件依赖同一数据，来自不同组件行为需要变更同一数据

工作原理图

我们使用的是vue2，所以安装vuex命令为：npm i vuex@3

原因：就是导入的东西先执行完才会执行下面代码，解决方法：就是在store/index.js下使用Vue.use(Vuex) 

使用纯Vue编写

src/App.vue

<template>
    <div>
        <Count/>
    </div>
</template>

<script>
import Count from './components/Count'
export default {
    name: 'App',
    components: { Count },

}
</script>

src/components/Count.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: 'Count',
  data(){
    return{
      sum:0,  //当前的和
      n:1     //用户选择的数字
    }
  },
  methods:{
    increment(){
      this.sum+=this.n
    },
    decrement(){
      this.sum-=this.n
    },
    incrementOdd(){
      if(this.sum%2)
        this.sum+=this.n
    },
    incrementWait(){
      setTimeout(()=>{
        this.sum+=this.n
      },500)
    }
  }
}
</script>

<style>
  button{
    margin-left: 5px;
  }
</style>

搭建Vuex环境

创建src/store/index.js该文件用于创建Vuex中最为核心的store

//引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// actions对象：用于响应组件中的动作
const actions={
    // context相当于精简版的$store
    jiaOdd(context,value){
        console.log('actions中的jiaOdd被调用了');
        if(context.state.sum%2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        console.log('actions中的jiaWait被调用了');
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}
// mutations对象：用于操作数据（state）
const mutations={
    JIA(state,value){
        console.log('mutations中的JIA被调用了');
        state.sum+=value
    },
    JIAN(state,value){
        console.log('mutations中的JIAN被调用了');
        state.sum-=value
    }
}
// state对象：用于存储数据
const state={
    sum:0   //当前的和
}
// 暴露/导出store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

在src/main.js中创建vm时传入store配置项

import Vue from 'vue'
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'

import store from './store'
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
    el: '#app',
    render: h => h(App),
    store,
    beforeCreate(){
        Vue.prototype.$bus=this //安装全局事件总线
    }
})

Vuex的基本使用

记忆方法：客人进餐厅后，如果对菜品不熟悉的话，则需要叫服务员推荐，如果经常来的话，那么直接跳过服务员，直接跟后厨说菜就得了，dispatch相当于服务员，commit相当于后厨，state相当于菜品 

src/components/Count.vue 

<template>
  <div>
    <h1>当前求和为：{{ $store.state.sum }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: 'Count',
  data(){
    return{
      n:1     //用户选择的数字
    }
  },
  methods:{
    increment(){
      this.$store.commit('JIA',this.n)
    },
    decrement(){
      this.$store.commit('JIAN',this.n)
    },
    incrementOdd(){
      this.$store.dispatch('jiaOdd',this.n)
    },
    incrementWait(){
      this.$store.dispatch('jiaWait',this.n)
    }
  }
}
</script>

<style>
  button{
    margin-left: 5px;
  }
</style>

getters配置项

src/store/index.js

//引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// actions对象：用于响应组件中的动作
const actions={
    // context相当于精简版的$store
    jiaOdd(context,value){
        console.log('actions中的jiaOdd被调用了');
        if(context.state.sum%2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        console.log('actions中的jiaWait被调用了');
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}
// mutations对象：用于操作数据（state）
const mutations={
    JIA(state,value){
        console.log('mutations中的JIA被调用了');
        state.sum+=value
    },
    JIAN(state,value){
        console.log('mutations中的JIAN被调用了');
        state.sum-=value
    }
}
// state对象：用于存储数据
const state={
    sum:0,   //当前的和
    school:'黑马',
    subject:'前端'
}
//
const getters={
    bigSum(state){
        return state.sum*10
    }
}
// 暴露/导出store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

四个map方法的使用

映射数据名称和从state当中数据名称两者相同才可以用数组写法

1.mapState方法：用于帮助映射State中的数据为计算属性

2.mapGetters方法：用于帮助映射getters中的数据为计算属性

3.mapMutations方法：用于帮助生成与mutations对话的方法

4.mapActions方法：用于帮助生成与actions对话的方法

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h1>当前求和放大10倍为：{{ bigSum }}</h1>
    <h1>我在{{ school }}，学习{{ subject }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
  name: 'Count',
  data() {
    return {
      n: 1     //用户选择的数字
    }
  },
  computed:{
    // 对象写法1
    // ...mapState({sum:'sum',school:'school',subject:'subject'}),
    // 数组写法2
    ...mapState(['sum','school','subject']),
    // 值必须加单引号，如果没有加的话，会变成寻找变量
    // ...mapGetters({bigSum:'bigSum'})
    ...mapGetters(['bigSum'])
  },
  methods: {
    /* increment() {
      this.$store.commit('JIA', this.n)
    },
    decrement() {
      this.$store.commit('JIAN', this.n)
    },
    incrementOdd() {
      this.$store.dispatch('jiaOdd', this.n)
    },
    incrementWait() {
      this.$store.dispatch('jiaWait', this.n)
    } */

    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    // ...mapMutations(['JIA','JIAN']),

    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    // ...mapActions('jiaOdd','jiaWait')
  }
}
</script>

<style>
button {
  margin-left: 5px;
}
</style>

注意：mapActions和mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象event

多组件共享数据案例

src/components/Count.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h4 style="color:red">Person组件总人数为:{{ personList.length }}</h4>
    <h1>当前求和放大10倍为：{{ bigSum }}</h1>
    <h1>我在{{ school }}，学习{{ subject }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
  name: 'Count',
  data() {
    return {
      n: 1     //用户选择的数字
    }
  },
  computed:{
    ...mapState(['sum','school','subject','personList']),
    ...mapGetters(['bigSum'])
  },
  methods: {
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
  }
}
</script>

<style>
button {
  margin-left: 5px;
}
</style>

src/components/Person.vue

<template>
  <div>
    <h1>人员列表</h1>
    <h4 style="color: red;">Count组件求和为：{{ sum }}</h4>
    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
import { nanoid } from 'nanoid'
export default {
  name: 'Person',
  data() {
    return {
      name: ''
    }
  },
  computed: {
    personList() {
      return this.$store.state.personList
    },
    sum() {
      return this.$store.state.sum
    }
  },
  methods: {
    add() {
      if (this.name === '') return
      const personObj = { id: nanoid(), name: this.name }
      // console.log(personObj)
      this.$store.commit('ADD_PERSON', personObj)
      this.name = ''
    }
  }
}
</script>

src/App.vue

<template>
    <div>
        <Count/>
        <hr>
        <Person/>
    </div>
</template>

<script>
import Count from './components/Count'
import Person from './components/Person'
export default {
    name: 'App',
    components: { Count,Person },

}
</script>

src/store/index.js

//引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// actions对象：用于响应组件中的动作
const actions={
    // context相当于精简版的$store
    jiaOdd(context,value){
        console.log('actions中的jiaOdd被调用了');
        if(context.state.sum%2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        console.log('actions中的jiaWait被调用了');
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}
// mutations对象：用于操作数据（state）
const mutations={
    JIA(state,value){
        console.log('mutations中的JIA被调用了');
        state.sum+=value
    },
    JIAN(state,value){
        console.log('mutations中的JIAN被调用了');
        state.sum-=value
    },
    ADD_PERSON(state,value){
        console.log('mutations中的JIAN被调用了');
        state.personList.unshift(value)
    }
}
// state对象：用于存储数据
const state={
    sum:0,   //当前的和
    school:'黑马',
    subject:'前端',
    personList:[
        {id:'001',name:'张三'}
    ]
}
//
const getters={
    bigSum(state){
        return state.sum*10
    }
}
// 暴露/导出store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

src/main.js

import Vue from 'vue'
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'

import store from './store'
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
    el: '#app',
    render: h => h(App),
    store,
    beforeCreate(){
        Vue.prototype.$bus=this //安装全局事件总线
    }
})

 

bubbleJessica
关注
专栏目录
基础理解 Vuex
无知小九的博客
08-06 124
Vuex 是一个专为 Vue.js 开发的全局状态管理系统。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。用于多个组件中数据共享、数据缓存等。（无法持久化、内部核心原理是通过创造一个全局实例 new Vue）Vuex为Vue Components建立起了一个完整的生态圈，包括开发中的API调用一环。...
深入理解vuex
浮游的博客
03-12 267
一、什么是vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 二、什么是状态管理 先了解下单向数据流 帮助我们更好地理解状态管理。平时我们写的简单vue文件中，包含data，template，methods这三个部分可以分别把data看作 state，驱动应用的数据源，也就是定义的变量； template 看作 view 以声明方式将 state 映射到视图, 显示变量； methods 看作 actions，响应在 view 上的状态变化； 三、为什么要用vuex 如果我们遇到多个视
我所理解Vuex状态管理
ch_s_t的专栏
06-04 1012
Vuex是一个专供Vue应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证以一种可预测的方式发生变化。它是一个存放多个组件共用的数据的一个容器，存放的数据是响应式，即存放数据发生变化，各个组件都会自动更新。每一个vuex应用的核心就是store,store基本上就是一个容器，它包含着应用中大部分的状态，它的状态存储是响应式，当组件从store中读取状态时，若 store中状态变化，则相应组件会自动更新。不能直接改变store中状态，唯一途径就是显式提交mutation。
理解vuex
m0_63057114的博客
03-13 970
理解vuex，学习笔记。 vuex中五大属性与四个map方法的使用
如何理解vuex
qq_55677780的博客
03-09 118
在B站看了一个up主(ilovecoding)的vue视频，感觉他说的好简单易懂，自己记录一下， 如图： vuex是一个专为vue.js应用程序开发的状态管理器，也就是多个组件共用的一个状态，然而这个状态放在哪一个组件里都不合适（避免组件嵌套太多，一个套一个），所以我们把这个状态提取出来单独放在一个地方，这时候我们需要就调取就好了，，也就相当于up主说的一个公共的变量一样，然后多个组件可以共享这个变量 ps:如有不对的或者另外见解的欢迎留言指正 ...
深入理解 Vuex 中的this.$store.dispatch方法
热门推荐
你若盛开，清风自来
04-24 9万+
🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6🍨🕠 牛客高级专题作者、在牛客打造高质量专栏🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程。
Vue系列：实例理解Vuex
Mr_chen的博客
05-06 678
当我们在项目中使用props来处理数据共享关系时，多层级的组件之间数据传递真的是很繁琐，费劲且不易维护，vuex的出现，就可以完美帮我们解决这个问题。
深入理解Vuex
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
12-28 445
什么是Vuex   Vuex是实现组件全局状态管理的一种机制，可以方便的实现组件之间数据的共享。使用Vuex可以集中的管理共享数据，高效实现数据共享，另外Vuex的数据是响应式的，可以实时保持数据与页面的同步。 安装方式   在使用vue-cli3或4建立项目的时候，有选项是否要安装Vuex，安装即可。项目完成之后，可以看到有一个store的文件夹，文件的内容： import Vue from '...
简单快速理解Vuex 图解 快速上手
小菜鸡程序媛的挣扎史
10-14 1157
目录 Vuex 是什么？ 五个核心的理解： 1、state: 存放需要管理的状态 2、getters:由基本数据派生/计算得出的数据（相当于State的计算属性） 3、Mutations：修改state的唯一方法（同步！） Mutations 需遵守 Vue 的响应规则 4、actions: 异步通过提交mutation更改state 5、modules: 模块化Vuex 同...
深入理解vuex2.0 之 modules
08-28
深入理解 Vuex 2.0 之 modules Vuex 2.0 的一个重要概念是模块（modules），它可以将应用程序拆分成多个独立的模块，每个模块都有自己的状态、变异、动作和 getter，从而使得应用程序的结构更加清晰、易于管理。 ...
深入理解Vuex 模块化(module)
08-29
深入理解Vuex 模块化(module) Vuex 模块化是指将Vuex Store分割成多个模块，每个模块拥有自己的状态、mutation、action、getter等，通过这种方式可以更好地组织和维护项目中的状态树。下面是对Vuex 模块化的详细...
理解vuex的状态管理模式架构
01-27
vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证以一种可预测的方式发生变化。 使用方式有如下2种： 1.如果直接在浏览器下引用包的话；如下： 接...
利用用vuex20写一个简单的计算器实际是为了加深理解vuex20
08-10
在本项目中，我们将通过创建一个简单的计算器来深入理解 Vuex 2.0 的核心概念和工作原理。这将涉及状态、 mutations、actions、getters 和模块化等关键点。 首先，我们需要了解 Vuex 的基本架构。Vuex 应用由四个...
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 705
【代码】【JavaScript】LeetCode：707设计链表。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 641
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
JS的输出语句
J3259392566的博客
09-13 344
js中严格区分大小写。
[附源码]SpringBoot+VUE+Java实现人脸识别系统
吉他程序员的博客
09-19 627
人脸数数据录入人脸管理摄像头识别端。
Java ERP系统源码深度解析：Spring Cloud Alibaba和Spring Boot的微服务实战
最新发布
m0_59198293的博客
09-19 427
库存管理：包括仓库信息、产品库存、出入库明细、其他入库、其他出库、库存调拨以及库存盘点管理。仓库信息管理包括仓库名称、仓库状态等的搜索、重置、新增、导出和删除等功能。采购入库和采购退货管理包括入库单和退货单的搜索、重置、新增、导出和删除等功能。销售订单管理包括订单的搜索、重置、新增、导出和删除等功能。销售出库和销售退货管理包括出库单和退货单的搜索、重置、新增、导出和删除等功能。付款单和收款单管理包括付款单号、付款时间、供应商、创建人、财务人员、付款账户等的搜索、重置、新增、导出和删除等功能。
模块化管理：深入理解Vuex 2.0中的modules
深入理解Vuex 2.0中的模块化模块（Modules） 在Vue应用开发中，Vuex 是一个强大的状态管理模式，用于集中管理应用的所有组件共享的状态。随着项目的规模扩大，单一的状态树结构可能会变得难以管理和维护，尤其是在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值