Vuex了解

最新推荐文章于 2024-07-25 15:03:56 发布
最新推荐文章于 2024-07-25 15:03:56 发布
阅读量375 收藏
点赞数
分类专栏： Vue 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WFL804203164/article/details/122322738
版权

Vuex是什么

概念：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。适用于任意组件之间通信。

PS：集中式（可以理解为学生都在课堂，老师给他们上课），还有分布式（可以理解为老师会72变，变成N个人，去学生家里给每个学生上课）

什么时候使用Vuex

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。

那么当我们开大大型单页面组件的时候，一定要用Vuex吗？

  • 当多个组件依赖于同意状态
  • 当来自不同组件的行为需要改变同一状态

Vuex图解

来自于官方
Vuex

Vuex的store中都有啥

  • state：存储公共数据的
  • mutations：操作公共数据的
  • actions：触发mutations的（这一步在某些时候不需要，可以直接调用mutations里面的方法）
  • getters：基于state中的数据再做处理的（可以理解为store的计算属性）

Vuex中的map系列

// 这两个是当我们这个页面使用不止一个store中的数据的时候，可以使用
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

methods: {
    increase() {
        // this.$store.dispatch('increase',this.val)
        // 如果没有复杂的逻辑，例如调用接口，我们可以直接接调用commit，不需要dispatch
        this.$store.commit('INCREASE',this.val)
    },
    // 这样就可以直接使用了，不用像上面样的自己写方法调用，这样是直接调用的commit，不经过actions，同样有数组的写法，名称保持统一
    ...mapMutations({increase1:'INCREASE'}),
    // 这样就可以直接使用了，不用像上面样的自己写方法调用，调用actions，同样有数组的写法，名称保持统一
    ...mapActions({increase2:'increase'})
},
computed:{
    // 这是对象写法
    // ...mapState({sum:'sum',userId:'userId',userName:'userName'}),
    // ...mapGetters({bigSum:'bigSum'})
    // 这是数组写法,这种写法，名字和store必须要一样
    ...mapState(['sum','userId','userName']),
    ...mapGetters(['bigSum'])
}

demo

// store/index.js

// 引入Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 创建state--用于存储数据
const state = {
    sum: 0,
    userId: 12345678,
    userName: '景天'
}

// 创建mutations--用于操作数据（state）
const mutations = {
    INCREASE(state,value) {
        state.sum += value
    },
    DECREASE(state,value) {
        state.sum -= value
    }
}

// 创建actions--用于响应组件中的动作
// 如果调用的是store.dispatch来修改store里面的值，会触发这个，再触发mutations里面的方法
const actions = {
    // 接收两个参数
    // 第一个参数可以理解为是一个小型的store,可以获取和使用store身上的东西，第二个参数是你传进来的值
    increase(context,value) {
        // INCREASE这个大写不大写无所谓，只是有些人喜欢区分
        context.commit('INCREASE',value)
    },
    decrease(context,value) {
        // INCREASE这个大写不大写无所谓，只是有些人喜欢区分
        context.commit('DECREASE',value)
    }
}

// 基于state中的数据做处理
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

// 导出使用
export default new Vuex.Store({
    state,
    actions,
    mutations,
    getters
})

两个组件演示Vuex

// 组件1
<template>
    <div class="increase">
        <div>当前的和为：{{sum}}</div>
        <div>显示10倍值：{{bigSum}}</div>
        <select v-model.number="val">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increase">+</button>
        <!-- 下面这一行传值进去是给mapMutations使用的，不然mapMutations获取不到你的值 -->
        <button @click="increase1(val)">mapMutations的+</button>
        <!-- 下面这一行传值进去是给mapActions使用的，不然mapActions获取不到你的值 -->
        <button @click="increase2(val)">mapActions的+</button>
    </div>
</template>

<script>
// 这几个是当我们这个页面使用不止一个store中的数据的时候，可以使用
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    data() {
        return {
            val: 1
        }
    },
    methods: {
        increase() {
            // this.$store.dispatch('increase',this.val)
            // 如果没有复杂的逻辑，例如调用接口，我们可以直接接调用commit，不需要dispatch
            this.$store.commit('INCREASE',this.val)
        },
        // 这样就可以直接使用了，不用像上面样的自己写方法调用，这样是直接调用的commit，不经过actions，同样有数组的写法，名称保持统一
        ...mapMutations({increase1:'INCREASE'}),
        // 这样就可以直接使用了，不用像上面样的自己写方法调用，调用actions，同样有数组的写法，名称保持统一
        ...mapActions({increase2:'increase'})
    },
    // computed中的这些其实可以不用，只是你写的时候要写很多，这里相当于是优化代码
    computed:{
        // 设定一个值接收store中的值，这样就不用写一大串了
        // 这是对象写法
        // ...mapState({sum:'sum',userId:'userId',userName:'userName'}),
        // ...mapGetters({bigSum:'bigSum'})
        // 这是数组写法,这种写法，名字和store必须要一样
        ...mapState(['sum','userId','userName']),
        ...mapGetters(['bigSum'])
    }
};
</script>

<style>
.increase {
    background-color: #ccc;
}
</style>

// 组件2
<template>
    <div class="decrease">
        <div>当前的和为：{{$store.state.sum}}</div>
        <div>显示10倍值：{{$store.getters.bigSum}}</div>
        <select v-model.number="val">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="decrease">-</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            val: 1
        }
    },
    methods: {
        decrease() {
            // this.$store.dispatch('decrease',this.val)
            this.$store.commit('DECREASE',this.val)
        }
    }
};
</script>

<style>
.decrease {
    background-color: #eee;
}
</style>

复杂demo

实际业务中，可能会有很多模块，那么同样会有很多的state，mutations，所以，就有了分块的写法

// store/index.js

// 引入Vuex
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import module1 from './modules/module1' // 这个里面的配置和user一样，只是业务逻辑的区别
Vue.use(Vuex)

// 导出使用
export default new Vuex.Store({
    modules: {
        user: user,
        module1: module1
    }
})

// ./modules/user

export default {
    namespaced: true,   // 不写不能直接使用名称
    state: {
        sum: 0,
        userId: 12345678,
        userName: '景天'
    },
    mutations: {
        INCREASE(state,value) {
            state.sum += value
        },
        DECREASE(state,value) {
            state.sum -= value
        }
    },
    actions: {
        increase(context,value) {
            context.commit('INCREASE',value)
        },
        decrease(context,value) {
            context.commit('DECREASE',value)
        }
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
  }

同样两个组件演示

// 组件1

<template>
    <div class="increase">
        <div>当前的和为：{{sum}}</div>
        <div>显示10倍值：{{bigSum}}</div>
        <select v-model.number="val">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increase">+</button>
        <!-- 下面这一行传值进去是给mapMutations使用的，不然mapMutations获取不到你的值 -->
        <button @click="increase1(val)">mapMutations的+</button>
        <!-- 下面这一行传值进去是给mapActions使用的，不然mapActions获取不到你的值 -->
        <button @click="increase2(val)">mapActions的+</button>
    </div>
</template>

<script>
// 这几个是当我们这个页面使用不止一个store中的数据的时候，可以使用
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    data() {
        return {
            val: 1
        }
    },
    methods: {
        increase() {
            // this.$store.dispatch('user/increase',this.val)
            this.$store.commit('user/INCREASE',this.val)
        },
        ...mapMutations('user',{increase1:'INCREASE'}),
        ...mapActions('user',{increase2:'increase'})
    },
    computed:{
        ...mapState('user',{sum:'sum',userId:'userId',userName:'userName'}),
        ...mapGetters('user',{bigSum:'bigSum'})
        // ...mapState('user',['sum','userId','userName']),
        // ...mapGetters('user',['bigSum'])
    }
};
</script>

<style>
.increase {
    background-color: #ccc;
}
</style>

// 组件2

<template>
    <div class="decrease">
        <div>当前的和为：{{$store.state.user.sum}}</div>
        <!-- modules模式下的getters，需要这么获取值 -->
        <div>显示10倍值：{{$store.getters['user/bigSum']}}</div>
        <select v-model.number="val">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="decrease">-</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            val: 1
        }
    },
    methods: {
        decrease() {
            // this.$store.dispatch('user/decrease',this.val)
            this.$store.commit('user/DECREASE',this.val)
        }
    }
};
</script>

<style>
.decrease {
    background-color: #eee;
}
</style>
後來9527
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuex详解.pptx
08-05
"Vuex详解" Vuex 是什么？...我们可以看一副官方给出的图片简单的案例，了解 Vuex 的状态管理机制。首先，我们需要在某个地方存放我们的 Vuex 代码，然后，我们让所有的 Vue 组件都可以使用这个 store 对象。
Vuex实现购物车小功能
10-14
首先，我们需要了解Vuex的核心概念： 1. **State**: State是全局共享的状态对象，用于存储应用中的数据。在本例中，购物车中的商品信息将存储在这里。`state`通常定义在Vuex store的初始化阶段，所有的状态都应集中...
小程序中的父子组件之间的通信
可可爱爱的你吖的博客
09-16 452
1.父组件向子组件通信 父组件的写法：这里通过current="{{current}}"来向子组件传值 <more-option bind:reVal="refresh" current="{{current}}"/> 子组件中在properties中获取 properties: { current: { type: Number, default: 0 } }, 然后直接可以在methods中的某个方法中获取就可以了 methods:{
vuex了解
weixin_45337430的博客
07-13 197
如果组件之间传递的数据比较复杂，建议使用vue的状态管理模式 vuex Vuex 适用于 父子、隔代、兄弟组件通信 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。 Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 改变 store 中的状态的唯一
VueX了解
weixin_55966394的博客
11-16 97
1、安装vuex npm install vuex -S npm install xxx -S，也就是 npm install module_name --save 写入dependencies(生产环境) npm install xxx -D，也就是 npm install module_name --save-dev 写入devDependencies（开发环境） 2、创建store目录 state.js //前端数据库 export default { } muta...
Vuex了解及运用
qq_66924116的博客
09-14 99
1.加载依赖 npm insatll vuex -s下载最新版本的依赖。解决前端组件传参问题，针对当前所有变量进行统一，可理解为前端数据库。2.导入vuex的核心4个组件，然后通过index.js加载进来。3.总线：vue与实例中定义变量，这个变量也是vue实例。如 store-- index.js。2.核心组件:state.js：存储变量。四、Vuex的异步加载问题及后台调用问题。mutations.js：改变变量值。actions.js ：改变变量值。一、了解vuex中的各个。二、利用vuex取值。
Vuex的了解
weixin_57750091的博客
05-23 178
1.vuex的用途和概念 vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。里面的数据可以被所有组件使用，也就是共享资源。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。 2.vuex里面的都有什么方面 1.state： vuex的基本数据,用来储存变量的。 2.getters： vuex里面的计算属性，getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。 3...
vuex了解与使用
qq_34455363的博客
05-28 252
一、前言 当我们的应用遇到多个组件共享状态时，会需要多个组件依赖于同一状态抑或是来自不同视图的行为需要变更同一状态。以前的解决办法： a.将数据以及操作数据的行为都定义在父组件; b.将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递) 传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。在搭建下面页面时，你可能会对 vue 组件之间的通信感到崩溃 ，特...
了解 vuex
skyIsHeight的博客
06-10 274
vuex 安装vuex cnpm i vuex --save 引入vuex 创建文件夹vuex，创建文件store.js 引入 Vue，vuex，用vue.use接收 声明常量 const state ={ count : 1 } 暴露变量 export default new Vuex.Store( { state } ) 其他页面引入 import state from ‘@/vue...
vueX的基础了解
a190404的博客
07-26 224
vueX的基础了解
了解vuex
努力工作娶老婆的博客
09-08 827
Vue中vuex
vuex-todos.zip
01-03
- 了解 Vuex 的基本架构和工作原理。 - 掌握如何在实际项目中管理和共享状态。 - 学习如何处理异步操作和状态变更。 - 提高 Vue 应用程序的可维护性和可测试性。 6. **进一步研究** - 理解如何使用 Vuex ...
Vuex提升学习篇
08-28
在上一篇入门教程中，我们了解到如何通过commit直接修改store中的状态。但在实际应用中，通常需要在数据变更前进行一些判断或执行异步操作。例如，文章中提到的需求是当`count`小于5时停止递减。为此，我们可以定义...
vuex-crud:Vuex-CRUD是Vuex的库，可帮助您轻松构建CRUD模块
05-02
在这里查看： ： 了解更多信息。 基本用法 创建您的第一个CRUD资源： // src/store/articles import createCrudModule from 'vuex-crud' ; export default createCrudModule ( { resource : 'articles' } ) ; 在...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 813
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 409
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）
m0_71835253的博客
07-25 538
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）_vue在打开一个界面的时候隐藏侧边栏-CSDN博客
苍穹外卖浏览器前端界面修改
最新发布
程序员象漂亮的博客
07-25 232
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
vuex教程
05-27
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理库。它允许您在应用程序中集中管理状态，并且使得状态的变化可追踪、可调试和可维护。以下是一个简单的 Vuex 教程，...如果您想深入了解 Vuex，请参阅 Vuex 官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值