【Vue】Vuex状态管理器的使用

最新推荐文章于 2024-07-29 10:24:37 发布
最新推荐文章于 2024-07-29 10:24:37 发布
阅读量4.7k 收藏 16
点赞数 1
分类专栏： Web前端 Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51481135/article/details/126432211
版权

目录

一、Vuex是什么？

二、什么时候使用Vuex?

三、Vuex的核心概念和API

1.state

2.mutations

3. actions

4. getters

5. modules

四、Vuex的运作流程 

五、应用举例 

1.安装

2.创建store

3.在main.js文件中使用store

4.创建Home.vue组件

5.在App.vue中导入Home.vue

六、vuex中各种辅助函数的用法，可以使我们更加方便的运用vuex

1.  …mapState

2.  …mapGetters

3.  …mapMutations：使用辅助函数后载荷的传参，直接在调用的地方进行传参便可

4.  …mapActions

 5. 修改后Home.vue组件

一、Vuex是什么？

  • Vuex在Vue项目开发时使用的状态管理工具。简单来说，就是对Vue的应用中多个组件的共享状态进行集中式的管理（读/写）
  • Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。
  • 而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上

二、什么时候使用Vuex?

  • 不适用场景：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的store模式
  • 适用场景： 构建一个中大型单页应用，可能会考虑如何更好地在组件外部管理状态，即多个组件共享状态
  • 多个视图依赖于同一状态：此时传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
  • 来自不同视图的行为需要变更同一状态：此时采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码
  • 在这些情况下就适合用Vuex进行全局单例模式管理

三、Vuex的核心概念和API

流程：View -> Actions -> Mutations -> State -> View

 

1.state

  • vuex 管理的状态对象
  • 它应该是唯一的

        const state = {
        xxx: initValue
        }


2.mutations

  • 包含多个直接更新 state 的方法(回调函数)的对象
  • 谁来触发: action 中的 commit(‘mutation 名称’)或者在组件中通过this.$store.commit(‘xxx’,params)使用。这个和组件中的自定义事件类似
  • 只能包含同步的代码, 不能写异步代码

        const mutations = {
                xxx(state, {data1}) {
                // 更新 state 的某个属性
                }
        }


3. actions

  • 提交 mutation，异步操作。包含多个事件回调函数的
  • 通过执行: commit()来触发 mutation 的调用, 间接更新 state
  • 谁来触发: 组件中通过this.$store.dispatch(‘action 名称’, data1)
  • 可以包含异步代码(axios)

        const actions ={
                zzz ({commit, state}, data1)
                commit(‘xxx’, {data1})
                }
        }


4. getters

  • 对数据获取之前的再次编译，可以理解为state的计算属性
  • 谁来读取: 组件中: this.$store.getters.xxx

        const getters ={
                xxx (state) {
                return …
                }
        }


5. modules

  • 包含多个 module:store的子模块，为了开发大型项目，方便状态管理而使用的，即将store分割为模块，使store对象不会太臃肿。
  • 一个 module 是一个 store 的配置对象
  • 与一个组件(包含有共享数据)对应

四、Vuex的运作流程 

 

流程详解:

  1. 在组件（页面）中，通过dispatch()或mapActions()这个函数分发给actions的函数去处理。
  2. actions的函数可以与后台交互，也可以通过 commit() 提交给mutations去处理。
  3. mutations 可以直接与devtool（如本地存储工具 → 在实例代码中的utils里的storageUtils.js）交互与直接更新state（数据状态）。
  4. 如果有计算属性（get函数写在getters里面），则状态通过getters的$store.getters()或mapGetters()来更新组件；反之就通过$store.state()或者mapState()的方式来更新组件。

五、应用举例 

1.安装

        npm i vuex -S

2.创建store

        store：src/store/index.js

import {createStore} from "vuex";
export default createStore({
    //state全局存储数据的对象
    state:{
        count:0,
        age:0
    },
    //计算属性（可选的）：用于获取state属性的值。
    //（1）若定义了getters:获取属性值的方法是$store.getters()或mapGetters()
    //(2)若没有定义getters,获取state属性值的方法是：$store.state()或者mapState()
    getters:{
        getterAge:(state)=>{  //state是原来的状态
            return state.age = 25  //return返回的是新的状态
        }
    },
    //mutations:用于修改state状态值，定义的函数必须是同步的
    mutations:{
        addCount(state,obj){ //state是原来的state,obj是调用该方法时传入的对象
            return state.count += obj.num
        },
        subCount(state,obj){
            return state.count -=obj.num
        }
    },
//    actions:通过动作的提交，来调用mutations中方法，修改state属性
    actions:{
    //    异步加法函数
        addCountAsyn(context){//context:表示上下文环境，就派发动作的对象（组件）
            setTimeout(()=>{
                context.commit('addCount',{
                    num:1
                })
            },3000)
        },
    //    异步减法函数
        subCountAsyn(context){
            setTimeout(()=>{
                context.commit('subCount',{
                    num:1
                })
            },3000)
        }
    }
})

3.在main.js文件中使用store

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store/index'

const app= createApp(App);
app.use(store)

app.mount('#app')

4.创建Home.vue组件

<template>
  <div>
    <h2>通过getter获得计算后的年龄：{{ getterAge }}</h2>
    <p>Count：{{ count }}</p>
    <button @click="handlerAdd()">加1</button>
    <button @click="handlerSub()">减1</button>
    <button @click="handlerAddAnys()">异步增加(2s后执行)</button>
    <button @click="handlerSubAnys()">异步减少(2s后执行)</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  computed: {
    count(){
      return this.$store.state.count
    },
    getterAge(){
      return this.$store.getters.getterAge
    }
   },
  methods: {
    handlerAdd(){
      this.$store.commit("addCount",{
        num: 1
      })
    },
    handlerSub(){
      this.$store.commit("subCount",{
        num: 1
      })
    },
    handlerAddAnys(){
      this.$store.dispatch('addCountAsyn')
    },
    handlerSubAnys(){
      this.$store.dispatch('subCountAsyn')
    }
   }
}
</script>

<style scoped>

</style>

5.在App.vue中导入Home.vue

import Home from './components/Home.vue'
<template>
  <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
  <Home/>
</template>

六、vuex中各种辅助函数的用法，可以使我们更加方便的运用vuex

1.  …mapState

count(){
     return this.$store.state.count
},
     等价于
...mapState([
  'count'
]),

2.  …mapGetters

count(){
     return this.$store.state.count
},
     等价于
...mapState([
  'count'
]),

3.  …mapMutations：使用辅助函数后载荷的传参，直接在调用的地方进行传参便可

handlerAdd(){
  this.$store.commit("addCount",{
    num: 1
  })
},
handlerSub(){
  this.$store.commit("subCount",{
    num: 1
  })
},
等价于
...mapMutations({
  handlerAdd: 'addCount',
  handlerSub: 'subCount'
})

4.  …mapActions

handlerAddAnys(){
  this.$store.dispatch('addCountAsyn')
},
handlerSubAnys(){
  this.$store.dispatch('subCountAsyn')
}
等价于
...mapActions({
  handlerAddAnys: 'addCountAsyn',
  handlerSubAnys: 'subCountAsyn'
})

修改上例中的Home.vue组件

 

 5. 修改后Home.vue组件

<template>
<div>
  <h3>通过Getters获取age:{{ getterAge }}</h3>
  <p>Count:{{ count }}</p>
  <button @click="handlerAdd({num:1})">同步加一</button>
  &nbsp; &nbsp; &nbsp; &nbsp;
  <button @click="handlerSub({num:1})">同步减一</button>
  &nbsp; &nbsp; &nbsp; &nbsp;
  <button @click="handlerAddAsyn">异步加一(3s后执行)</button>
  &nbsp; &nbsp; &nbsp; &nbsp;
  <button @click="handlerSubAsyn">异步减一(3s后执行)</button>
</div>
</template>
<script>
import  { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
export default {
  name: "Home",
  computed: {
    // count() { //使用非getters方法获取state的count属性值
    //   return this.$store.state.count
    // },
    ...mapState(['count']),

  //   getterAge() {//使用getters方法获取state的age属性
  //     return this.$store.getters.getterAge
  //   }
    ...mapGetters(['getterAge'])
   },

  methods: {
    // handlerAdd() {//同步加一
    //   this.$store.commit('addCount', {num: 1});//通过commit提交动作：addCount,给mutation
    // },
    // handlerSub() {//同步减一
    //   this.$store.commit('subCount', {num: 1})
    // },
    ...mapMutations({
      handlerAdd:'addCount',
      handlerSub:'subCount'
    }),

    // handlerAddAsyn() {//异步加一
    //   this.$store.dispatch('addCountAsyn');//通过dispatch方法将动作派发给action,再由action提交给mutation
    // },
    // handlerSubAsyn() {//异步加一
    //   this.$store.dispatch('subCountAsyn');//通过dispatch方法将动作派发给action,再由action提交给mutation
    // }
    ...mapActions({
      handlerAddAsyn:'addCountAsyn',
      handlerSubAsyn:'subCountAsyn'
    })
  }
}
</script>

<style scoped>

</style>

早睡早起长头发
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuex基础【一】
小管管的博客
07-08 3372
​ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用存储管理应用的所有组件的状态，并以相应的规则保证状态以一种的方式发生变化。结论 初始化： vuex基础-state state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中 如何在组件中获取count? 1.原始形式- 插值表达式 组件中可以使用 this.$store 获取到vuex中的，可通过state属性属性获取count， 如下 2.计算属性- 将state属性定义在计算属性中
vuex(store) 之 getters详解
qq_46302247的博客
05-31 5399
getters基本使用 // @/store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { counter: 9 }, getters: { powerCounter(state) { return state.counter * state.counter } }, mu
Vue之数据状态管理器Vuex
最新发布
书山有路
07-29 1337
1、什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 前文中我们总结了如何在父子组件中进行参数传递，实现相对简单 但是开发中使用更为频繁的却是页面传参或者是无关联组件传参，这是就需要使用到Vuex数据状态管理器了 2、什么情况下我应该使用 Vuex？ 如果您不打算开发大型单页...
Vue2 中vuex和store基本用法——取值之this.$store.getters.getValue & 存值之this.$store.commit(‘setValue‘, paramVal)
热门推荐
weixin_44867717的博客
04-12 2万+
Vue2 中vuex和store基本用法——取值之this.KaTeX parse error: Expected 'EOF', got '&' at position 24: …tters.getValue &̲ 存值之this.store.commit(‘setValue’, paramVal) 1、应用场景 在不同路由中使用同一个会改编的参数，也就是需要一个全局参数。即声明一个最简单的store后，怎么存入全局变量，怎么获取全局变量。 2、操作步骤 2.1、声明一个store的inde
关于Vuex的基本使用
m0_54089303的博客
12-23 1024
关于vuex的使用
如何在HBuilderX的自定代码块中输出$符号 - 带$符号输出this.$store.getter
Rudon滨海渔村的博客
02-16 757
工具 > 代码块设置 > JavaScript代码块。双美元符号 = 输出单美元符号，自定义代码块中，输入爽美元符号。
Vue的状态管理vuex使用方法详解
10-15
为了解决这些问题，Vue推荐使用vuex作为状态管理工具。 引入vuex，首先我们需要创建一个store对象，它包含了state、mutations和actions等核心概念。state存储应用的全局状态，是所有组件共享的数据源。mutations是...
Vue的Flux框架之Vuex状态管理器
08-29
Vue的Vuex状态管理器是基于Flux架构理念设计的，用于集中管理和协调Vue应用程序中的组件状态。在大型单页应用（SPA）开发中，当多个组件需要共享和同步状态时，Vuex提供了一个强大的解决方案。通过将状态抽取到一个...
vue-vuex状态管理，实现数据的集中管理
07-02
在使用Vue和Vuex进行状态管理时，遵循以下步骤： 1. **安装Vuex**：通过npm或yarn添加Vuex到项目中。 2. **创建Vuex实例**：在main.js或类似的入口文件中初始化Vuex store，并注入到Vue实例中。 3. **定义状态(state...
Vuex核心概念：Getter，定义Getter，使用getters的第一种方式，使用getters的第二种方式
我就知道你会来，我们一起进步吧！
03-18 614
/定义Getterstate:{count:0},getters:{return '当前最新的数量是【'+state.count+'】'})
解决$store.getters调用不执行的问题
12-13
api：https://vuex.vuejs.org/zh/guide/getters.html 场景： 在登录时将登录得到的用户信息存储在vuex的state和sessionStorage中。使用时在state中获取，当因为刷新等原因导致state中没有数据时，去sissionStorage中获取。 错误： 登录后，需要获取用户信息时，getters中属性的方法不会执行。只是去getters中获取缓存 解决方法： 将getters中的属性改写成方法，这样每次调用的时候就会执行，去从新获取数据。 getloginInfor: (state) => () => {} 代码： import V
vuex-store状态管理仓库的核心概念五个（state，getter，matation，action，module）详细解析（2024-05-17）
hap1994的博客
05-17 1653
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。Vuex 是一个专为 Vue.js 应用程序开发的。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex中的getters的使用
程序员徐小白的博客
04-19 876
通过this.$store.getters来使用 store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const getters={ count(state){ console.log(state.count) }...
Vuex-getters配置项
见证自己学习,成长的记录
06-27 845
首先在store里面定义getters，在里面进行逻辑处理，它有一个参数是state，里面有存放的数据，通过return返回最终处理好的结果概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。在store.js中追加getters配置......//创建并暴露store......getters})1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。2. 在store.js中追加getters配置//js代码。
vuex中getters 的基本用法
weixin_40305713的博客
08-27 9557
一、getter 定义 Vuex允许我们在store中定义"getter" ，用于对state中存储的数据进行过滤操作。 就像vue生命周期中的computed一样，getter的返回值 会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算 二、使用方法 1、通过属性访问 Getter 接受 state 作为其第一个参数： example:现在需要获取list：[1,2,3,4,5,6,7,8,9]中大于5的元素 const store = new Vuex.Store({ .
vue store getters mapGetters 具体用法
2401_84868241的博客
05-09 525
vue store getters mapGetters 具体用法
VUEX使用总结
十五春会的博客
02-28 138
VUEX使用总结
Vuex理解使用；store封装；actions,mutations,state,getters使用；mapState,mapGetters,mapMutations,mapActions使用
艾米的猫儿的博客
11-17 1481
** 搭建vuex环境 ** 1.安装 npm i vuex 2. 引入store; import store from ‘你的存放路径’ 在new 中 写store使用store; 创建store的两种方式 src下创建store文件夹,新增一个index.js文件 编写index.js文件 创建三个对象分别是actions ,mutations,state // 引入vuex import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值