Vue框架笔记——Vuex

最新推荐文章于 2023-07-07 18:18:58 发布
最新推荐文章于 2023-07-07 18:18:58 发布
阅读量408 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42995361/article/details/124974839
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

第四章 Vuex

1.Vuex

在这里插入图片描述

1.1 概念

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

1.2 何时使用？

多个组件需要共享数据时

1.3 搭建vuex环境

安装Vuex npm i vuex@3(Vue2.0 安装vuex 3版本，Vue3.0 安装vuex 4版本)

  1. 创建文件：src/store/index.js

    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

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

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

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

    ......
//引入store
import store from './store'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})
1.4 基本使用

  1. 初始化数据、配置actions、配置mutations，操作文件store.js

    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

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

  2. 组件中读取vuex中的数据：$store.state.sum

  3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

    备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

2.Vuex 案例

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)
   },
  },
  mounted() {
   console.log('Count',this)
  },
 }
</script>

<style lang="css">
 button{
  margin-left: 5px;
 }
</style>

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
   /* jia(context,value){
      console.log('actions中的jia被调用了')
      context.commit('JIA',value)
   },
   jian(context,value){
      console.log('actions中的jian被调用了')
      context.commit('JIAN',value)
   }, */
   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,
})

App.vue

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

<script>
 import Count from './components/Count'
 export default {
  name:'App',
  components:{Count},
  mounted() {
   // console.log('App',this)
  },
 }
</script>

main.js

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

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

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

3.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

4.四个map方法的使用

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

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

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

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

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

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

    methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

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

    methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

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

5.多组件共享数据

main.js

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

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

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

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},
  mounted() {
   // console.log('App',this)
  },
 }
</script>

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
   /* jia(context,value){
      console.log('actions中的jia被调用了')
      context.commit('JIA',value)
   },
   jian(context,value){
      console.log('actions中的jian被调用了')
      context.commit('JIAN',value)
   }, */
   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中的ADD_PERSON被调用了')
      state.personList.unshift(value)
   }
}
//准备state——用于存储数据
const state = {
   sum:0, //当前的和
   school:'B站',
   subject:'前端',
   personList:[
      {id:'001',name:'张三'}
   ]
}
//准备getters——用于将state中的数据进行加工
const getters = {
   bigSum(state){
      return state.sum*10
   }
}

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

components/Count.vue

<template>
 <div>
  <h1>当前求和为：{{sum}}</h1>
  <h3>当前求和放大10倍为：{{bigSum}}</h3>
  <h3>我在{{school}}，学习{{subject}}</h3>
  <h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3>
  <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,mapMutations,mapActions} from 'vuex'
 export default {
  name:'Count',
  data() {
   return {
    n:1, //用户选择的数字
   }
  },
  computed:{
   //借助mapState生成计算属性，从state中读取数据。（数组写法）
   ...mapState(['sum','school','subject','personList']),
   //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
   ...mapGetters(['bigSum'])
  },
  methods: {
   //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
   ...mapMutations({increment:'JIA',decrement:'JIAN'}),
   //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
   ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
  },
  mounted() {
   // const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
   // console.log(x)
  },
 }
</script>

<style lang="css">
 button{
  margin-left: 5px;
 }
</style>

components/Person.vue

<template>
 <div>
  <h1>人员列表</h1>
  <h3 style="color:red">Count组件求和为：{{sum}}</h3>
  <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(){
    const personObj = {id:nanoid(),name:this.name}
    this.$store.commit('ADD_PERSON',personObj)
    this.name = ''
   }
  },
 }
</script>

6.模块化+命名空间

  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'}),
编程小菜鸟鸭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex知识点梳理
空寻的博客
08-09 389
Vuex 1.概念 ​ 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 2.何时使用？ ​ 多个组件需要共享数据时 3.搭建vuex环境 创建文件：src/store/index.js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备acti
Vuex架构设计
sanstu的博客
09-20 1121
记录最近学到的应该怎样去设计Vuex 首先代码都放在src下的store目录 store下有六个js文件： 1.index.js：入口文件， 其中debug是线下false，线上true。 然后strict是是否开启严格模式，开启时会检测对state的修改是不是通过mutations来修改的，如果不是则会报错。 最后plugins是Vuex的插件，而createLogg
vue+vueRouter+vuex+vux(微信项目开发框架)
一米阳光
08-08 1万+
用vue+vueRouter+vuex+vue编写的单页面手机端项目框架 非常适合H5项目··· 咱们开始吧！ main.js import Vue from 'vue' import Vuex from 'vuex' import FastClick from 'fastclick' import {WechatPlugin, AjaxPlugin, LoadingP
vue-10 vuex框架搭建
别浪
11-20 312
1.概述 版本3.1.1;vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性,可以做组件间的数据共享； 2.官方文档 https://vuex.vuejs.org/zh/ 3.目录结构 Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则： 应用层级的状态应该集中到单个 store 对象中。 提交mutation是更改状态的唯一方法，并且这..
Vue2渐进式框架（七）Vuex
javaScript1997的博客
04-04 272
一、Vuex 1.1Vuex是什么？ Vuex是实现组件全局状态(数据)管理的一种机制，可以方便实现组件之间的数据共享； 1.2状态管理？ 状态： 就是Vue组件中data里面的属性，我们也将叫做数据。 管理： 就是对于项目中数据的操作管理。 1.3管理什么状态呢？ 用户的登录状态、地理位置信息、商品的收藏、购物车的物品； 二、单界面状态管理 2.1具体实现 三、多界面状态管理 当我们的应用遇到多个组件共享状态的时候，单向数据流的简洁性很容易被破坏； 多个视图依赖于同一状态。 来自不同视图的行为需要变更
vue第五天笔记02——vuex数据仓库练习
08-22
在“vue第五天笔记02——vuex数据仓库练习”中，我们将深入理解Vuex的工作原理和实践应用。 首先，Vuex的核心概念包括状态(state)、派生状态(getters)、 mutations(状态变更函数)、 actions(异步操作) 和模块...
【Vue2.0】笔记（六）-Vue-cli、Vuex、mockjs、gitee、github
小女不才
04-08 2152
前端工程化（四）Vue脚手架(1) 基本用法1.1（五）Element-Ul的基本使用二级目录三级 （四）Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构。官网地址：https://cli.vuejs.org/zh/ (1) 基本用法 安装3.x版本的Vue脚手架： npm install -g @vue/cli 卸载命令：npm uninstall -g vue-cli 检查命令 Vu...
vue相关知识点——浅浅笔记
06-22
Vue 相关知识点浅浅笔记 一、 Vue 概述 Vue.js 是一个渐进式 JavaScript 前端框架，用于构建用户界面。它具有声明式、响应式的数据绑定和组件化的开发特点。 Vue 基于 MVVM 模式，使用数据驱动的方式，将数据和 ...
主流框架：Vue框架笔记
Li8L9xF的博客
01-14 662
一、vue框架基础 jQuery与vue的区别 vue，拥有DOM虚拟，高效操作，便于维护； jQuery:直接操作DOM，消耗性能，不便于维护； Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 vue渐进式框架
前端项目笔记——网易云音乐、通用后台管理
06-15
本文将围绕“前端项目笔记——网易云音乐、通用后台管理”这一主题，深入探讨相关知识点，主要关注Vue.js框架的运用和其他前端技术的整合。 一、Vue.js框架基础 Vue.js是一款轻量级的渐进式JavaScript框架，以其...
VUE框架之vuex的讲解
weixin_42487000的博客
08-06 245
VUE框架之vuex的讲解 写于2020.8.5 家中 ...
vuex在新框架中的使用
weixin_43837268的博客
01-15 132
store.js import Vuex from 'vuex'; export default { install:function (Vue) { let vuex = new Vuex.Store({ state: { lists:['111'] }, m...
vuex框架原理和源码研究分析
前端程序猿steven的博客
05-10 191
大家一直使用vuex, 但是大多数很少了解到vuex的背后原理，我也很好奇它的背后原理，故上网看博客了解和下载Vuex源码研究分析。 vuex是管理页面数据状态的统一数据操作生态系统。修改数据要通过action mutation state change 的流程才能修改，保证数据的修改可控和方便排查数据流向。state变化后，vue根据双向数据绑定实现页面展示。 目录一、框架核心流程二、vuex源码目录机构三、初始化装载与注入3.1装载实例3.2 装载分析四、store对象构造4.1 环境判断4.2 数据初
Vuex详解
OneBaBa的专栏
05-24 153
Vuex
vuex中的四个map方法的使用
最新发布
见证自己学习,成长的记录
07-07 4917
用于帮助我们映射state中的数据为计算属性//借助mapState生成计算属性：sum、school、subject（对象写法）//借助mapState生成计算属性：sum、school、subject（数组写法）},用于帮助我们映射getters中的数据为计算属性//借助mapGetters生成计算属性：bigSum（对象写法）//借助mapGetters生成计算属性：bigSum（数组写法）},3用于帮助我们生成与actions对话的方法，即：包含的函数methods:{
vue的四个map方法的使用
qq_63656102的博客
04-24 1901
在使用这四个map之前必须先导入对应的vuex插件：computed:{//计算属性},这样做后HTML上就只用写一个sum就可以了,简化了代码第二个是mapGetters，他可以更新getters值，用法和mapState是差不多一样的，我这里就不展示了第三个是mapActions，可以生成与actions对话的方法methods:{// add(){// }},第四个是mapMutations，用法和mapActions是一样的掌握四个map可以大大提高编码效率。
vue中的map()快速使用
热门推荐
weixin_43961652的博客
02-23 1万+
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。注意：map() 不会对空数组进行检测。注意：map() 不会改变原始数组。
vue中Map对象使用总结
静心园
04-17 1万+
vue中Map对象使用总结 一般情况下List已经可以处理大部分情况下的业务，但在特殊的场景下，使用map可以节省很多的代码量，但在实践过程中如果套用list的方法去使用则会遇到很多的坑，这里对在Vue中正确使用map对象做一个整理，顺便吐槽下现在网上的文章真是质量低下，很多连js中list和map是啥就可以出来瞎写真的是误人子弟。 map的基本使用 //1.新建 var mapObject=new Map() //2.添加 mapObject.set(key,value) //如果对应的key已经存在，则
vuex-map函数汇总
当幸福来敲门
05-15 429
一、如何使用全局state ● 直接使用： this.$store.state.xxx; ● map辅助函数： computed: { // 省略其他计算属性 ...mapState(['xxx']), ...mapState({'新名字': 'xxx'}) } 二、如何使用modules中的state ● 直接使用： this.$store.state.模块名.xxx; ● map辅助函数： computed: { ...mapState('模块名', ['xxx'])
Vue踩坑之旅——Vuex
06-03
非常感谢您的提问！以下是回答： Vuex 是一个专门为 Vue.js 应用程序开发的状态管理库，它集中管理应用程序的所有组件的状态。在使用 Vuex 过程中，可能会遇到以下一些常见的问题和坑： 1. 不要在 mutations 中执行异步操作，因为 mutations 是同步执行的，异步操作会导致状态不一致。 2. 在组件中使用 mapState、mapGetters、mapMutations、mapActions 等辅助函数时，如果命名冲突，可以使用命名空间来避免。 3. 在使用 Vuex 时，应该注意代码的可维护性和可读性，避免将所有逻辑都写在一个文件中，应该按照模块化的方式组织代码。 希望这些信息能对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值