Vuex核心概念

最新推荐文章于 2022-06-20 22:01:23 发布
最新推荐文章于 2022-06-20 22:01:23 发布
阅读量162 收藏
点赞数
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44868492/article/details/121129713
版权
  1. State
  2. Getters
  3. Mutation
  4. Action
  5. Module

①State单一状态树（单一数据源）

（1）如果状态信息是保存到多个Store对象中，那么之后的管理和维护等等都会变得特别困难
（2）所以Vuex使用了单一状态树来管理应用层级的全部状态
（3）单一状态树能够以最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

② Getters 基本使用（类似于组件中的计算属性）

store \index:
import Vue from 'vue'
import Vuex from 'vuex'

// 1. 安装插件
Vue.use(Vuex)

// 2. 创建对象
const store = new Vuex.Store({
  state: {
    counter: 1000,
    students: [
      { id: 110, name: 'tom', age: 18 },
      { id: 111, name: 'bob', age: 23 },
      { id: 112, name: 'helon', age: 24 },
      { id: 113, name: 'jack', age: 15 }
    ]
  },
  mutations: {
    // 方法
    increment (state) {
      state.counter++
    },
    decrement (state) {
      state.counter--
    }
  },
  actions: {

  },
  modules: {

  },
  getters: {
    // 返回counter的平方 计算属性
    powerCounter (state) {
      return state.counter * state.counter
    },
    more20stu (state) {
      // 获取年龄大于 20 岁的学生
      return state.students.filter(s => s.age > 20)
    },
    // 第二个参数传入的就是一个getters
    more20stuLen (state, getters) {
      return getters.more20stu.length
    },
    moreAgeStu (state) {
      // return function (age) {
      //   return state.students.filter(s => s.age > age)
      // }
      return age => state.students.filter(s => s.age > age)
    }
  }
})

// 3. 导出 store 对象
export default store
App.vue 组件：
<template>
  <div id="app">
    <h2>------------app 内容------------</h2>
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>

    <h2>---------App内容： getters相关信息---------</h2>
    <h2>{{ $store.getters.powerCounter }}</h2>
    <h2>{{$store.getters.more20stu}}</h2>
    <h2>{{$store.getters.more20stuLen}}</h2>
    <h2>{{$store.getters.moreAgeStu(8)}}</h2>
    <h2>-----------hello vuex 内容------------</h2>
    <hello-vuex></hello-vuex>
  </div>
</template>
<script>
import HelloVuex from './components/HelloVuex.vue'
export default {
  name: 'App',
  components: {
    HelloVuex
  },
  data () {
    return {
      message: 'app组件'
    }
  },
  methods: {
    addition () {
      this.$store.commit('increment')
    },
    subtraction () {
      this.$store.commit('decrement')
    }
  }
}
</script>
<style lang="less">

</style>
HelloVuex.vue:
<template>
  <div>
    <h2>{{$store.getters.powerCounter}}</h2>
    <h2>{{$store.getters.more20stu}}</h2>
  </div>
  </template>

<script>
export default {

  name: 'HelloVuex',
  props: {
    counter: Number
  }

}
</script>

<style scoped>

</style>

③Mutations状态更新

●Vuex的store状态的更新唯一方式：提交Mutation
●Mutation主要包括两部分：
    ▲ 字符串的事件类型（type）
    ▲ 一个回调函数（handler），该回调函数的第一个参数就是state
● mutation的定义方式：

mutations: {
	increment() {
		state.count++
	}
}

● 通过mutation更新

addition () { 
	this.$store.commit('increment')
}
vuex-mutations传参数

①vuex-mutations携带参数

App组件

<template>
  <div id="app">
    <h2>------------app 内容 mutations------------</h2>
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">添加学生</button>
    <h2>---------App内容： getters相关信息---------</h2>
    <h2>{{ $store.getters.powerCounter }}</h2>
    <h2>{{$store.getters.more20stu}}</h2>
    <h2>{{$store.getters.more20stuLen}}</h2>
    <h2>{{$store.getters.moreAgeStu(8)}}</h2>
    <h2>-----------hello vuex 内容------------</h2>
    <hello-vuex></hello-vuex>
  </div>
</template>
<script>
import HelloVuex from './components/HelloVuex.vue'
export default {
  name: 'App',
  components: {
    HelloVuex
  },
  data () {
    return {
      message: 'app组件'
    }
  },
  methods: {
    addition () {
      this.$store.commit('increment')
    },
    subtraction () {
      this.$store.commit('decrement')
    },
    addCount (count) {
      // 参数被称为是mutation的 载荷payload: 负载 
      this.$store.commit('incrementCount', count)
    },
    addStudent () {
      const stu = { id: 114, name: 'baicai', age: 18 }
      return this.$store.commit('addStudent', stu)
    }
  }
}
</script>
<style lang="less">

</style>


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

// 1. 安装插件
Vue.use(Vuex)

// 2. 创建对象
const store = new Vuex.Store({
  state: {
    counter: 1000,
    students: [
      { id: 110, name: 'tom', age: 18 },
      { id: 111, name: 'bob', age: 23 },
      { id: 112, name: 'helon', age: 24 },
      { id: 113, name: 'jack', age: 15 }
    ]
  },
  mutations: {
    // 方法
    increment (state) {
      state.counter++
    },
    decrement (state) {
      state.counter--
    },
    incrementCount (state, count) {
      state.counter += count
    },
    addStudent (state, stu) {
      state.students.push(stu)
    }
  },
  actions: {

  },
  modules: {

  },
  getters: {
    powerCounter (state) {
      return state.counter * state.counter
    },
    more20stu (state) {
      return state.students.filter(s => s.age >= 20)
    },
    more20stuLen (state, getters) {
      return getters.more20stu.length
    },
    moreAgeStu (state) {
      // return function (age) {
      //   return state.students.filter(s => s.age > age)
      // }
      return age => state.students.filter(s => s.age > age)
    }
  }
})

// 3. 导出 store 对象
export default store

mutations的提交风格
除了普通的提交方式Vue还提供了另外一种风格，它是一个包含type属性的对象

this.$store.commit({
	type: 'changeCount',
	count: 100
})

Mutation中的处理方式是将整个commit的对象作为payload使用，所以代码没有改变

changeCount(state, payload) {
	state.count = payload.count
}

Mutation响应规则
Vuex的store中的state是响应式的，当state中的数据发生改变时，Vue组件会自动更新
当给state中的对象添加新属性时，使用下面的方式：
    方式一： 使用Vue.set(obj, ‘newProp’, 123)
    方式二： 用新对象给就对象重新赋值
在这里插入图片描述

响应式方法： 可以做到响应式

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

// 1. 安装插件
Vue.use(Vuex)

// 2. 创建对象
const store = new Vuex.Store({
  state: {
    counter: 1000,
    students: [
      { id: 110, name: 'tom', age: 18 },
      { id: 111, name: 'bob', age: 23 },
      { id: 112, name: 'helon', age: 24 },
      { id: 113, name: 'jack', age: 15 }
    ],
    info: {
      name: 'kobe',
      age: 40,
      height: 1.98
    }
  },
  mutations: {
    // 方法
    increment (state) {
      state.counter++
    },
    decrement (state) {
      state.counter--
    },
    incrementCount (state, payload) {
      console.log(payload)
      state.counter += payload.count
    },
    addStudent (state, stu) {
      state.students.push(stu)
    },
    changeName (state) {
      // state.info.name = 'xiongmao'
      // state.info.address = 'ooo' 这种方法并没有将address添加到响应式系统里面
      // 该方法是将address 添加到响应式系统里面
      // Vue.set(state.info, 'address', 'ooo')
      // 该方式做不到响应式
      // delete state.info.age
      // 该方法可以做到响应式
      Vue.delete(state.info, 'age')
    }
  },
  actions: {

  },
  modules: {

  },
  getters: {
    powerCounter (state) {
      return state.counter * state.counter
    },
    more20stu (state) {
      return state.students.filter(s => s.age >= 20)
    },
    more20stuLen (state, getters) {
      return getters.more20stu.length
    },
    moreAgeStu (state) {
      // return function (age) {
      //   return state.students.filter(s => s.age > age)
      // }
      return age => state.students.filter(s => s.age > age)
    }
  }
})

// 3. 导出 store 对象
export default store

Vuex-mutations类型常量
抽取常量

	export const INCREMENT = 'increment'

引用常量

	import { INCREMENT } from './mutations-type.js'
	[INCREMENT] (state) {
		state.info.name = 'coo'
	}

commit() 函数 发送请求

import { INCREMENT } from './store/mutations-type.js'
increment() {
	this.$store.commit(INCREMENT)
}

App.vue


<template>
  <div id="app">
    <h2>-------------App内容： info对象的内容是否是响应式的---------</h2>
    <h2>{{ $store.state.info }}</h2>
    <button @click="updateInfo">点击改变name内容</button>
    <h2>------------app 内容 mutations------------</h2>
    <h2>{{ message }}</h2>
    <h2>{{ $store.state.counter }}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">添加学生</button>

    <h2>---------App内容： getters相关信息---------</h2>
    <h2>{{ $store.getters.powerCounter }}</h2>
    <h2>{{ $store.getters.more20stu }}</h2>
    <h2>{{ $store.getters.more20stuLen }}</h2>
    <h2>{{ $store.getters.moreAgeStu(8) }}</h2>
    <h2>-----------hello vuex 内容------------</h2>
    <hello-vuex></hello-vuex>
  </div>
</template>
<script>
import HelloVuex from './components/HelloVuex.vue'
import { INCREMENT } from './store/mutations-types'
export default {
  name: 'App',
  components: {
    HelloVuex
  },
  data () {
    return {
      message: 'app组件'
    }
  },
  methods: {
    addition () {
      this.$store.commit(INCREMENT)
    },
    subtraction () {
      this.$store.commit('decrement')
    },
    addCount (count) {
      // 1.普通的提交封装
      // this.$store.commit('incrementCount', count)
      // 2. 特殊的提交封装
      this.$store.commit({
        // 事件类型
        type: 'incrementCount',
        count
      })
    },
    addStudent () {
      const stu = { id: 114, name: 'baicai', age: 18 }
      return this.$store.commit('addStudent', stu)
    },
    updateInfo () {
      return this.$store.commit('changeName')
    }
  }
}
</script>
<style lang="less">
</style>

mutations-type.js

export const INCREMENT = 'increment'

/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import { INCREMENT } from './mutations-types.js'
// 1. 安装插件
Vue.use(Vuex)

// 2. 创建对象
const store = new Vuex.Store({
  state: {
    counter: 1000,
    students: [
      { id: 110, name: 'tom', age: 18 },
      { id: 111, name: 'bob', age: 23 },
      { id: 112, name: 'helon', age: 24 },
      { id: 113, name: 'jack', age: 15 }
    ],
    info: {
      name: 'kobe',
      age: 40,
      height: 1.98
    }
  },
  mutations: {
    // 方法
    [INCREMENT] (state) {
      state.counter++
    },
    decrement (state) {
      state.counter--
    },
    incrementCount (state, payload) {
      console.log(payload)
      state.counter += payload.count
    },
    addStudent (state, stu) {
      state.students.push(stu)
    },
    changeName (state) {
      // state.info.name = 'xiongmao'
      // state.info.address = 'ooo' 这种方法并没有将address添加到响应式系统里面
      // 该方法是将address 添加到响应式系统里面
      // Vue.set(state.info, 'address', 'ooo')
      // 该方式做不到响应式
      // delete state.info.age
      // 该方法可以做到响应式
      Vue.delete(state.info, 'age')
    }
  },
  actions: {

  },
  modules: {

  },
  getters: {
    powerCounter (state) {
      return state.counter * state.counter
    },
    more20stu (state) {
      return state.students.filter(s => s.age >= 20)
    },
    more20stuLen (state, getters) {
      return getters.more20stu.length
    },
    moreAgeStu (state) {
      // return function (age) {
      //   return state.students.filter(s => s.age > age)
      // }
      return age => state.students.filter(s => s.age > age)
    }
  }
})

// 3. 导出 store 对象
export default store

注意: 尽量不要在mutations里面进行异步操作

④vuex-actions的使用

1.如果在mutations里面直接写异步程序，
例如

 changeName() {
 	setTimeout(() => {
        state.info.name = 'oookkk'
      }, 1000)
    }

那么vue调试工具将跟踪不到数据的变化state中记录的信息将会变成错误的信息，没有实时更新
注意: 尽量不要在mutations里面进行异步操作
在这里插入图片描述
在这里插入图片描述
如果有异步操作，vue组件通过dispatch("") Action要执行的函数，
然后Action函数里面要commit 提交mutations通过mutations修改state

App组件

  updateInfo () {
      return this.$store.dispatch('aUpdateInfo')
    }

/store/index.js

  actions: {
    // context 上下文
    aUpdateInfo (context) {
      setTimeout(() => {
        context.commit('changeName')
      }, 1000)
    }
  }

mutations

	mutations: {
    // 方法
    [INCREMENT] (state) {
      state.counter++
    },
    decrement (state) {
      state.counter--
    },
    incrementCount (state, payload) {
      console.log(payload)
      state.counter += payload.count
    },
    addStudent (state, stu) {
      state.students.push(stu)
    },
    changeName (state) {
      state.info.name = 'xiongmao'
      // state.info.address = 'ooo' 这种方法并没有将address添加到响应式系统里面
      // 该方法是将address 添加到响应式系统里面
      // Vue.set(state.info, 'address', 'ooo')
      // 该方式做不到响应式
      // delete state.info.age
      // 该方法可以做到响应式
      // Vue.delete(state.info, 'age')
      // setTimeout(() => {
      //   state.info.name = 'oookkk'
      // }, 1000)
    }
  },

dispatch 传参问题

方法一
App.vue:

updateInfo() {
	this.$store.dispatch('aUpdateInfo', {
		message: '携带的信息',
		success: () => {
			console.log('success')
		}
	}
}

action

  actions: {
    // context 上下文
    aUpdateInfo (context, payload) {
      setTimeout(() => {
        context.commit('changeName')
        // 回调函数
        payload()
      }, 1000)
    }
  }

方法二：优雅写法
App.vue

updateInfo() {
	this.$store.dispatch('aUpdateInfo', '传递的信息').then(res => {
        console.log('里面完成了提交')
        console.log(res)
      })
}

action


aUpdateInfo (context, payload) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('changeName')
          console.log(payload)
          resolve('resolve')
        }, 1000)
      })
    }

⑤vuex-modules的使用

Vuex五大核心概念
m0_50744582的博客
10-26 785
一. 概述 》Vuex是一个专为Vue.js应用程序开发的状态管理模式。 - 是一个加强版的data！在单页应用中会有一个data函数，管理当前应用的状态。处理大量的需要在组件间传递的数据，直接定义一个全局的data属性保存就行了。 - 如果我们的页面比较简单，切记干万不要没事找事引入Vuex，我们使用Vuex是因为项目变得复杂之后，有很多数据需要在父组件、子组件和孙组件之间传递，处理起来很繁琐，于是就需要Vuex这样一个可以对这一部分数据进行统一管理的东西。 - 也是响应式 》什么情况需要使用
Vuex的Getter学习
kaelyn_X的博客
02-25 2184
Vuex 的 Getter 学习   若要从 store 中的 state 中派生出一些状态，Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。 目录： Vuex 的 Getter 学习 例子 将 store 注入到每个子组件 传...
Vuex 4源码学习笔记 - 学习Vuex的TS .d.ts类型描述（十三）
小帅的编程笔记
12-03 1009
在上一篇笔记中：Vuex 4源码学习笔记 - 通过Vuex源码学习TypeScript类型测试（十二） 我们看到了Vuex的类型声明文件，我们知道Vuex的源码是使用JavaScript来开发的，JS并没有类型的声明，那么Vuex要实现TypeScript的类型就只能通过TypeScript的.d.ts来去描述类型。 那么今天我们来看看Vuex是如何通过.d.ts去描述Vuex的类型。我们会结合它的源码来看 首先来看到的就是createStore使用方法，它接受下面的一些参数 import { create
vuex中五大核心以及插件plugins
Wordass的博客
04-26 1971
什么是vuex？ 在vuex的官方文档中表示 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 那什么是状态管理模式呢？ vue组件之间通讯使用的是单向数据流 但是当多个组件共享状态时，单向数据流的简洁性很容易被破坏。 多个视图依赖于同一状态。 来自不同视图的行为需要变更同一状态。 对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经
在 vue 中使用 typescript（vuex使用, 组件注册，接口定义）
qq_45219069的博客
04-19 3100
在vue项目中使用typescript，主要是vuex的使用，组件全局注册，接口的定义 一 项目搭建-----跳过（需要注意的是，如果不小心选择了语法检测，可在根目录下新建 vue.config.js 文件 里面添加如下） module.exports = { lintOnSave: false } 二 组件全局注册（定义的过滤器，指令等），主要介绍 vue.use()方法 这...
vuex4的基本使用（typescript）
copyer_xyf的博客
08-07 3267
每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer） 前言： ​ 这篇博客主要介绍了vuex4的基本使用，从创建一个store对象，然后再store内部的属性进行一一的解释（就是vuex的五大和核心：state， getters，mutations，actions, modules），解释主要从类型，参数等等方面的解释，还是比较的详细。内容有点长，可以收藏起来，慢慢看哟（嘻嘻） vuex介绍 ​ Vuex 是一个专为 Vue.js 应用程序开.
Vue -Ts入门 Vuex (二)
没有翅膀的我们，只是随便认为不能飞而已
12-30 3663
接着上文 Vue -Ts入门 (二) 本人也是第一次写，所以若有所出处，欢迎指正。 准备工作 按照个人项目实际情况 npm i vuex -S npm i vuex-class -S 文件夹目录 main.ts import Vue from "vue"; import Test1 from "./views/Test1.vue"; + import store from "./sto...
掌握Vuex核心概念与操作教程
### Vuex核心概念 1. **状态管理（State Management）** 状态管理是指管理应用中所有组件的状态并进行统一管理的一种模式。Vuex是实现这一模式的一种库，它通过提供一个单一的状态树来管理应用层级的全部状态，并...
Vue.js状态管理：Vuex核心概念与实战应用的深度剖析
[Vue.js状态管理：Vuex核心概念与实战应用的深度剖析](https://img-blog.csdnimg.cn/direct/055dee4d98064d96b83111a338d2f769.png) # 摘要 本文全面介绍了Vue.js状态管理工具Vuex的核心概念和实践应用。第一章提供...
快速掌握Vuex核心概念与实战应用
Vuex的核心概念包括： 1. **状态管理**：Vuex提供了一种集中式存储应用状态的方式，将那些需要在多个组件间共享的数据存储在store对象的`state`属性中。这有助于维护单一数据源，减少组件之间的状态混乱。 2. **...
Vue.js状态管理实战：Vuex核心概念及案例分析
接着深入解析了Vuex的核心概念，包括状态的定义和使用、属性的高级用法、模块化状态管理、提交（Mutations）的同步操作与日志记录以及动作（Actions）处理异步逻辑的机制。在案例实战章节，文章讨论了Vuex在简单和...
Redux学习之路----带你学会“全局状态树”
没有途径，只有努力
06-20 587
Redux学习之路 带你学会全局状态管理~ 该代码只要一进入该页面就会通知store.js，退出则会打印销毁,再通过store.js进行数据处理然后再转发给订阅者zhuye.js，最后主要拿到想要的数据…进行相对应操作这就是Redux的一个工作流程,完美解决了传参的复杂繁琐性…创建两个不同的reducerCityReducer.js TabbarReducer.js redux中:store.js引入两个reducer再通过进行合并 访问 在没有拆分前: 拆分后...
设计的魅力(一)：导师问：你了解状态树的设计吗？我：什么是状态树？
冷月心的博客
08-08 1107
设计的魅力(一)：导师问：你了解状态树的设计吗？我：什么是状态树？
Vuex简单使用学习二（Getter）
前端恶霸
02-11 362
假如Vuex定义某个数组llist const store=new Vuex.Store({ state:{ list:[0,2,15,30,50] }, mutations:{ }, getters:{ filteredList(state){ return state.list.filter(item=&gt;item&lt;10) }, ...
vuex中的getter值赋值给vue组件里的data
w845386392的博客
06-06 8904
通过watch将orderDetailsData对象赋值给data中的consignee对象，这样能将操作能避免v-model修改时，直接改动vuex中的值。 &lt;template&gt;   &lt;input type="text" placeholder="请输入收货人名字" v-model="consignee.name"&gt;   &lt;input type="text&quo
1023 VuexTree Day Getters and mapGetters
CF1402345274的博客
10-24 217
1023 做了上节课的笔记 ... 对象展开运算符 今天讲 Getter Action Module 在 Son1 和 Son2 两个组件里面求和结果 数组的求和函数 .reduce((res,ele)=>res+ele,0),创建公共方法 sum.js 在每个需要的组件中引入使用 getters 接收参数 (state,getters),还要传参，函数里面返回一个函数。传参是传给返回的那个函数，不是 gertters 方法下的 getNum 函数，因为 getNum 函数只接收 (state,ge
Vuex中的Getter的使用
weixin_43613849的博客
07-06 6382
1、Getter的作用 1、传入一个参数（state） 在getter中接受的第一个参数是Vuex中的state 有时候，我们需要从store中获取一些state变异后的状态 getters: { powerCounter(state) { return state.counter * state.counter }, more15stu(state) { return state.students.filter(item => item.a
getter方法的作用 vuex_Vuex之理解Getters的用法实例
weixin_29274337的博客
01-17 1332
1.什么是getters在介绍state中我们了解到，在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。我们可以认为，【getters】是store的计算属性。２.如何使用定义：我们可以在s...
VUE：Vuex--状态管理模式(store/state/Getter/Action/Mutation/Module)
Schon_zh的博客
09-21 5040
Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同： Vuex 的状态存储是响应式的。当 Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值