学习 VueX 这一篇就够了

已于 2022-05-29 14:54:18 修改
阅读量1.8k 收藏 24
点赞数 1
分类专栏： Vue 文章标签： VueX vue.js
于 2022-05-02 11:10:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apple_53947466/article/details/124484267
版权

目录

1、Vuex是什么

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

2、什么时候使用Vuex

  • 多个组件依赖于同一状态
  • 来自不同组件的行为需要变更同一状态
  • 多个组件需要共享数据
    在这里插入图片描述

3、搭建vuex环境

1、安装 npm i vuex@3 （本教程用的是vue2，所以安装vuex3。如果用的是vue3，那么安装vuex4）

2、搭建初始环境

src/store/index.js（storeg管理三个配置）

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

Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作、处理业务逻辑
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

main.js 创建vm时传入 store 配置项

import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js';

Vue.config.productionTip = false

new Vue({
	el: '#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

4、求和案例

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('ADD', this.n)
    },
    decrement() {
      this.$store.commit('SUBTRACT', this.n)
    },
    incrementOdd() {
      this.$store.dispatch('addOdd', this.n)
    },
    incrementWait() {
      this.$store.dispatch('addWait', this.n)
    },
  },
}
</script>

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

src/store/index.js

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

Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作、处理业务逻辑
const actions = {
    addOdd(context,value){
        console.log("actions中的addOdd被调用了")
        if(context.state.sum % 2){
            context.commit('ADD',value)
        }
    },
    addWait(context, value) {
        console.log("actions中的addWait被调用了")
        setTimeout(()=>{
			context.commit('ADD',value)
		},500)
    },
}

//准备mutations对象——修改state中的数据
const mutations = {
    ADD(state,value){
        state.sum += value
    },
    SUBTRACT(state,value){
        state.sum -= value
    }
}

//准备state对象——保存具体的数据
const state = {
    sum: 0
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

App.vue

<template>
  <div class="container">
    <Count />
  </div>
</template>

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

在这里插入图片描述

总结

  1. 初始化数据state，配置actions、mutations，操作文件store.js
  2. 组件中读取vuex中的数据：$store.state.sum
  3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

5、getters的使用

1、概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

2、在 store.js 中追加 getters配置

......

const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	......
	getters
})

3、组件中读取数据：$store.getters.bigSum

<h1>当前求和的10倍为:{{$store.getters.bigSum}}</h1>

在这里插入图片描述
在这里插入图片描述

6、map方法

原本每次从Store取值需要 $Store.State.xxx，可以通过计算属性简化一下直接取 xxx

1、mapState方法：用于帮助我们映射 state 中的数据为计算属性

computed: {
    //借助mapState生成计算属性：sum、name（对象写法）
    ...mapState({sum:'sum',name:'name'}),
         
    //借助mapState生成计算属性：sum、name（数组写法）
    ...mapState(['sum','name']),
},

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

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

调整直接获取计算属性

<h1>当前求和为:{{sum}}</h1>
<h1>当前求和的10倍为:{{bigSum}}</h1>
<h1>Author:{{name}}</h1>

3、mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

// incrementOdd() {
//   this.$store.dispatch('addOdd', this.n)
// },
// incrementWait() {
//   this.$store.dispatch('addWait', this.n)
// },

...mapActions({ incrementOdd: 'addOdd', incrementWait: 'addWait' })

4、mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

// increment() {
//   this.$store.commit('ADD', this.n)
// },
// decrement() {
//   this.$store.commit('SUBTRACT', this.n)
// },

...mapMutations({ increment: 'ADD', decrement: 'SUBTRACT' }),

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

<button @click="increment(n)">+</button>
<button @click="decrement(n)">-</button>
<button @click="incrementOdd(n)">当前求和为奇数再加</button>
<button @click="incrementWait(n)">等一等再加</button>

7、多组件共享数据

App.vue

<template>
  <div class="container">
    <Count />
    <hr/>
    <Person />
  </div>
</template>

<script>
import Count from './components/Count'
import Person from './components/Person'

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

Count.vue

<template>
  <div>
    <h1>当前求和为:{{sum}}</h1>
    <h1>当前求和的10倍为:{{bigSum}}</h1>
    <h1>Author:{{name}}</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>

    <h2 style="color:red">Person组件的总人数为{{personList.length}}</h2>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

export default {
  name: 'Count',
  data() {
    return {
      n: 1,     //用户选择的数字
    }
  },
  methods: {
    // 借助mapMutations生成对应的方法，方法会调用commit方法去联系mutations
    ...mapMutations({ increment: 'ADD', decrement: 'SUBTRACT' }),

    // 借助mapActions生成对应的方法，方法会调用dispatch方法去联系actions
    ...mapActions({ incrementOdd: 'addOdd', incrementWait: 'addWait' })
  },
  computed: {
    ...mapState(['sum', 'name', 'personList']),
    ...mapGetters(['bigSum'])
  }

}
</script>

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

Person.vue

<template>
  <div>
    <h2 style="color:red">Count组件的求和为{{sum}}</h2>
    <h1>人员列表</h1>
    <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 { mapState } from 'vuex'
import { nanoid } from 'nanoid';
export default {
  name: 'Person',
  data() {
    return {
      name: ''
    }
  },
  computed: {
    ...mapState(['personList', 'sum'])
  },
  methods: {
    add() {
      const person = { id: nanoid(), name: this.name }
      this.$store.commit('ADD_PERSON', person)
    }
  }
}
</script>

index.js

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

Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作、处理业务逻辑
const actions = {
    addOdd(context, value) {
        if (context.state.sum % 2) {
            context.commit('ADD', value)
        }
    },
    addWait(context, value) {
        setTimeout(() => {
            context.commit('ADD', value)
        }, 500)
    },
}

//准备mutations对象——修改state中的数据
const mutations = {
    ADD(state, value) {
        state.sum += value
    },
    SUBTRACT(state, value) {
        state.sum -= value
    },
    ADD_PERSON(state, value) {
        state.personList.push(value)
    }
}

//准备state对象——保存具体的数据
const state = {
    sum: 0,
    name: 'Laptoy',
    personList: [
        { id: '001', name: 'AAA' },
        { id: '002', name: 'BBB' },
    ]
}

//准备getters对象——用于蒋state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

在这里插入图片描述

8、模块化+命名空间

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import CountOptions from './count';
import PersonOptions from './person';

Vue.use(Vuex)


//创建并暴露store
export default new Vuex.Store({
    modules: {
        CountOptions,
        PersonOptions
    }
})

count.js

export default {
    namespaced: true,
    actions: {
        addOdd(context, value) {
            if (context.state.sum % 2) {
                context.commit('ADD', value)
            }
        },
        addWait(context, value) {
            setTimeout(() => {
                context.commit('ADD', value)
            }, 500)
        },
    },
    mutations: {
        ADD(state, value) {
            state.sum += value
        },
        SUBTRACT(state, value) {
            state.sum -= value
        },
    },
    state: {
        sum: 0,
        name: 'Laptoy',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}

person.js

export default {
    namespaced: true,
    actions: {
        addPersonWang(context, value) {
            if (value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON', value)
            } else {
                alert('添加的人必须姓王！')
            }
        },
    },
    mutations: {
        ADD_PERSON(state, value) {
            state.personList.push(value)
        }
    },
    state: {
        personList: [
            { id: '001', name: 'AAA' },
            { id: '002', name: 'BBB' },
        ]
    },
    getters: {
        firstPerson(state) {
            return state.personList[0].name
        }
    }
}

App.vue

<template>
  <div class="container">
    <Count />
    <hr/>
    <Person />
  </div>
</template>

<script>
import Count from './components/Count'
import Person from './components/Person'

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

Count.vue

<template>
  <div>
    <h1>当前求和为:{{sum}}</h1>
    <h1>当前求和的10倍为:{{bigSum}}</h1>
    <h1>Author:{{name}}</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>

    <h2 style="color:red">Person组件的总人数为{{personList.length}}</h2>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

export default {
  name: 'Count',
  data() {
    return {
      n: 1,     //用户选择的数字
    }
  },
  methods: {
    // 借助mapMutations生成对应的方法，方法会调用commit方法去联系mutations
    ...mapMutations('CountOptions', { increment: 'ADD', decrement: 'SUBTRACT' }),

    // 借助mapActions生成对应的方法，方法会调用dispatch方法去联系actions
    ...mapActions('CountOptions', { incrementOdd: 'addOdd', incrementWait: 'addWait' })
  },
  computed: {
    ...mapState('CountOptions', ['sum', 'name', 'personList']),
    ...mapGetters('CountOptions', ['bigSum']),
    ...mapState('PersonOptions', ['personList']),
  }

}
</script>

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

Person.vue

<template>
  <div>
    <h2 style="color:red">Count组件的求和为{{sum}}</h2>
    <h1>人员列表</h1>
    <h2>第一个人员为{{firstPerson}}</h2>
    <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 { mapGetters, mapState } from 'vuex'
import { nanoid } from 'nanoid';
export default {
  name: 'Person',
  data() {
    return {
      name: ''
    }
  },
  computed: {
    ...mapState('PersonOptions', ['personList', 'sum']),
    ...mapState('CountOptions', ['sum']),
    ...mapGetters('PersonOptions',['firstPerson'])
  },
  methods: {
    add() {
      const person = { id: nanoid(), name: this.name }
      this.$store.commit('PersonOptions/ADD_PERSON', person)
    }
  }
}
</script>

在这里插入图片描述

1、目的：让代码更好维护，让多种数据分类更加明确。

2、修改store.js

const countAbout = {
  namespaced:true,//开启命名空间
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

3、开启命名空间后，组件中读取state数据：

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

4、开启命名空间后，组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

5、开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

6、开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
Laptoy
关注
  • 1
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vuex的五个属性及使用方法示例
tigerhhzz的博客
03-07 2万+
vuex的五个属性及使用方法示例
uvex快速入门 Vue.js 应用程序开发的状态管理模式 + 库
qq_43944285的博客
05-12 1293
参考视频 vue参考文档 VueX 大型项目 管理公共数据的工具 作用: 独立与组件系统之外的,状态管理工具,采用集中式存储管理所有的组件状态,解决多组件数据通信(跨组件通信 A组件修改数据其他组件都能收到), 数据变化是可预测的 响应式 主要内容三个: state 保存公共数据 (类似于data) mutations 修改数据 actions 异步请求 次要的 : getters 计算属性 (类似于com
前端学习（2623）：Vuex初步识别
歌谣的博客
11-20 420
Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 # 什么是“状态管理模式”？ 让我们从一个简单的 Vue 计数应用开始： new Vue({ // state
Vuex学习
前端与计算机相关知识的分享，博主的qq523235674
04-17 876
00-事件总线 目的：掌握非父子组件之间数据通讯 首先：明确一件事件，组件的自定义事件，只能由组件自己来触发。 然后：假设A组件想传值给B组件，AB组件的非父子。其实也是依赖自定义事件来传递。 在A组件触发一个自定义事件（myEvent），触发的时候可以传参，参数可以是A组件数据 在B组件触发绑定自定义事件（myEvent），事件的函数接收传参，参数其实是A组件数据 触发事件和绑定事件由另外一个组件负责，A导入它触发事件，B导入它绑定事件，满足自定义事件触发绑定条件。 另外一个组件：我们称
vue-Vuex详解
m0_64081601的博客
03-26 796
对Vue应用中多个组件的，也是一种组件间通信的方式，且适用于其实对于任意组件间通信也可以通过全局事件总线来完成，对数据管理包含数据的读和写，但是对于全局事件总线传递数据我们之前接触的只涉及读，而未涉及写数据（修改数据），当我们用全局事件总线同时读数据，修改数据的时候就会使代码变得混乱然而当我们使用vuex后，将每个组件都要使用的数据都放在vuex中，可以简化代码，进行数据的集中式管理，进行读写数据也非常方便。
Vuex详解，一文彻底搞懂Vuex
m0_67401746的博客
07-28 2475
其中参数state参数是必须的，也可以自己传递一个参数，如下代码，进行计数器的加减操作，加法操作时可以根据所传递参数大小进行相加，减法操作没有传参每次减一。
如何快速掌握Vuex
m0_67477525的博客
09-15 146
Vuex一共分为了五大核心组件，一张图解让你看懂Vuex官方图示：1.State：单一状态树用一个对象就包含了全部的应用层级状态；每个应用将仅仅包含一个 store 实例2.Getters：状态获取(可以认为是store的计算属性)，在组件中的computed中引入getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算Getter 接受 state 作为其第一个参数，也可以接受其他 getter 作为第二个参数。
Vuex ——详细介绍
热门推荐
A____t的博客
05-02 4万+
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。可以理解为：将多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的 Vue 实例中，让其他组件可以使用，它最大的特点是响应式。 一般情况下，我们会在 Vuex 中存放一些需要在多个界面中进行共享的信息。比如用户的登录状态、用户名称、头像、地理位置信息、商品的收藏、购物车中的物品等，这些状态信息，我们可以放在统一的地方，对它进行保存和管理。
Vuex详解
输入技术、输出想法
04-28 6944
Vuex详解认识VuexVuex是做什么的?管理什么状态呢?单界面的状态管理单界面状态管理的实现多界面状态管理Vuex基本使用安装使用Vuex简单的案例Vuex核心概念StateState单一状态树GettersGetters基本使用Getters作为参数和传递参数MutationMutation状态更新Mutation传递参数Mutation提交风格Mutation响应规则Mutation常量类型 –概念Mutation同步函数ActionAction的基本定义Action返回的PromiseModule
Vue系列之—Vuex详解
zhou139856的博客
07-03 3246
Vue系列之—Vuex详解
1-vuex安装及详细使用教程-附案例源码
xiao廸要飞
08-07 8022
文章目录1. 为什么要用 vuex ？2. vuex 是什么？2.1 单向数据流2.1.1 单向数据流小结3. vuex 的工作流4. 安装 vuex5. 引入 vuex6. 从 Store 开始6.1 创建一个 Store6.2 实例6.2.1 初始化6.2.2 example016.2.2.1 example01-16.2.2.2 example01-26.2.2.3 example01-36.2.2.4 example01-46.2.2.5 example01-56.2.2.6 example01-
Vuex提升学习篇
01-19
如果本篇有看不明白的地方，请移步上一篇：Vuex 入门 上一篇我们讲了如何通过一些简单的动作来改变 store.js 中的数据对象，在实际工作中，这是完全无法满足工作需求的，所以这篇我们来说说如何做一些简单的流程...
这是另一篇关于vuex的学习笔记.docx
11-24
这是另一篇关于vuex的学习笔记.docx
vuex学习之Actions的用法详解
12-08
沿用vuex学习—简介的案例：这里是加10 减1 1.在store.js 中 代码为： import Vue from 'vue' import Vuex from 'vuex' //使用vuex模块 Vue.use(Vuex); //声明静态常量为4 const state = { count : 4 }; const ...
用Vuex构建一个笔记应用
02-24
在这个教程里面，我们会通过构建一个笔记应用来学习怎么用Vuex。我会简单地介绍一下Vuex的基础内容，什么时候该用它以及用Vuex的时候该怎么组织代码，然后我会一步一步地把这些概念应用到这个笔记应用里面。这个是...
Vuex的五个属性及使用方法。
hudabao888666的博客
02-17 1万+
Vuex的五个属性及使用方法。
Vuex介绍
m0_53151031的博客
11-15 3894
一、Vuex简介 二、了解vuex中的各个js文件的用途 三、利用vuex同步存值 四、利用vuex取值 五、Vuex的异步加载问题及后台调用问题
Vue——vuex简介
mantou_riji的博客
07-22 909
vuex是专门在Vue中实现状态(）管理的一个Vue，对vue应用中 多个组件的共享状态(）进行(读/写)。 vuex也是一种，且适用于任意组件间通信。引入： 需求：组件B、C、D 都需要组件A上的数据X。 如果使用： 这时候我们就会想既然所有组件都要使用组件A中的数据我们为什么不直接把组件A中的数据提取出来作为公共数据呢，这就引入了vuex。 vuex不属于任何一个组件，里面存储的是组件公用的数据，任何组件都可以获取和修改vuex中的数据：所以只要用到共享数据就可以使用vuex。如果vue组件的请求有任
Vuex：简介和基本使用
最新发布
程序员无羡的博客
04-07 1109
目标：明确Vuex是什么，应用场景以及优势state: {count: 0},// 定义mutations})通过mutations修改state的步骤1.定义 mutations 对象，对象中存放修改 state 的方法2.组件中提交调用 mutations(通过$store.commit(‘mutations的方法名’))getters: {// getters函数的第一个参数是 state// 必须要有返回值。
Vuex控制一个组件显示隐藏
05-16
1. 在Vuex的state中添加一个变量，用于控制组件的显示和隐藏，例如： ```javascript state: { isComponentVisible: false } ``` 2. 在组件中通过计算属性获取isComponentVisible的值，并根据该值来控制组件的显示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Laptoy

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

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

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

打赏作者

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

抵扣说明：

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

余额充值