vue 学习总结（二）[Vuex]

最新推荐文章于 2023-05-18 15:45:36 发布
最新推荐文章于 2023-05-18 15:45:36 发布
阅读量934 收藏
点赞数 1
分类专栏： Vue 前端 文章标签： linq webview c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012465923/article/details/123536408
版权

目录

Vuex

Vuex介绍

工作原理图

使用说明

案例一：求和案例

不使用vuex

使用vuex，将sum变量存储到vuex的state中

getters配置项

mapState, mapGetters

mapMutations，mapActions

多组件间共享数据

模块化+命名空间

Vuex

Vuex介绍

  • 专门在Vue中集中管理数据的一个插件，对Vue中多组件共享数据的集中管理，是组件间的一种通信方式，适用于任何组件间的数据传递；
  • Vuex Github 项目

工作原理图

使用说明

  • 首先安装Vuex插件：npm install vuex@3 （注意：vue2只能用vuex3，vue3只能用vuex4，分版本安装）；
  • 使用Vuex的地方，进入插件并使用：import Vuex from "vuex"；
  • 官方推荐使用方式：在src下建立store目录，目录下建立index.js文件；
  • /store/index.js文件引入并使用vuex插件，声明vuex的actions、mutations、state变量，根据声明的变量实例化vuex，最后js暴露实例对象；
  • main.js中引入Vuex插件库和 /store/index.js，实例化Vue时使用Vuex插件并传入store配置项

 /store/index.js

//引入Vue核心库
import Vue from "vue"
//引入Vuex插件库
import Vuex from "vuex"

//使用插件
Vue.use(Vuex)

//声明actions, 用于接收$store的dispatch操作，处理业务逻辑
const actions = {}

//声明mutations, 用于接收$store的commit操作，修改state中的数据
const mutations = {}

//声明state, 用于存放共享数据
const state = {}

//实例化store对象并暴露
export default new Vuex.Store({
    actions,
    mutations,
    state
});

main.js

import Vue from 'vue'
import App from './App.vue'

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

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  //实例化Vue时传入store配置项
  store
}).$mount('#app')

 

 

案例一：求和案例

不使用vuex

创建MyCount模块，不使用vuex的情况下写出基本结构，并实现基本功能

<template>
    <div>
        <h2>求和案例，当前和为{{sum}}</h2>
        <input type="text" v-model.number="num">
        <button @click="increment">加</button>
        <button @click="decrement">减</button>
        <button @click="waitIncrement">等待1s后加</button>
    </div>
</template>

<script>
    export default {
        name: "MyCount",
        data(){
            return {
                num: 2,
                sum: 1
            }
        },
        methods: {
            increment(){
                this.sum += this.num;
            },
            decrement(){
                this.sum -= this.num;
            },
            waitIncrement(){
                setTimeout(()=>{
                    this.sum += this.num;
                }, 1000)
            }
        }
    }
</script>

App.vue里使用MyCount模块

<template>
    <div id="app">
        <MyCount/>
    </div>
</template>

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

页面呈现 

 

 

使用vuex，将sum变量存储到vuex的state中

首先在store/index.js中，state里声明变量sum，mutations里声明加减方法去直接操作sum；actions里声明等待后加1的方法，去操作业务逻辑，然后调用mutations的方法；

//引入Vue核心库
import Vue from "vue"
//引入Vuex插件库
import Vuex from "vuex"

//使用插件
Vue.use(Vuex)

//声明actions, 用于接收$store的dispatch操作，处理业务逻辑
const actions = {
    //注意：传参第一个为上下文可直接使用，value是调用时传递的参数值
    waitIncrement(context, value){
        setTimeout(()=>{
            context.commit('INCREMENT', value);
        }, 1000)
    }
}

//声明mutations, 用于接收$store的commit操作，修改state中的数据
const mutations = {
    //注意：约定mutations里的方法名大写，传参第一个默认参数为store里的state可直接使用，value为调用时传递的参数值
    INCREMENT(state, value){
        state.sum += value;
    },
    DECREMENT(state, value){
        state.sum -= value;
    }
}

//声明state, 用于存放共享数据
const state = {
    sum: 10
}

//实例化store对象并暴露
export default new Vuex.Store({
    actions,
    mutations,
    state
});

MyCount模块中的sum变量，重vuex中的state中取值，Mycount代码修改为如下

<template>
    <div>
        <h2>求和案例，当前和为{{sum}}</h2>
        <input type="text" v-model.number="num">
        <button @click="increment">加</button>
        <button @click="decrement">减</button>
        <button @click="waitIncrement">等待1s后加</button>
    </div>
</template>

<script>
    export default {
        name: "MyCount",
        data(){
            return {
                num: 2,
                // sum: 1
            }
        },
        //使用计算属性声明sum并从store取值
        computed: {
            sum(){
                return this.$store.state.sum;
            }
        },
        methods: {
            increment(){
                //使用commit方法能直接调用mutations里的方法
                this.$store.commit('INCREMENT', this.num);
            },
            decrement(){
                this.$store.commit('DECREMENT', this.num);
            },
            waitIncrement(){
                //使用dispatch方法能直接调用acitons里的方法
                this.$store.dispatch('waitIncrement', this.num);
            }
        }
    }
</script>

 

 

getters配置项

在store/index.js里配置getters，可实现和组件中computed一样的功能；

如在页面展示最后10倍sum的值。命名该变量为tenSum。

store/index.js里配置getters，并声明tenSum变量，同时在实例化store对象时引入getters

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

//实例化store对象并暴露
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
});

组件MyCount页面使用$store.getters.xxx使用

<h2>求和案例，当前和为{{sum}}</h2>
<h3>当前和放大十倍为{{tenSum}}</h3>
...

//使用计算属性声明sum并重store取值
computed: {
    sum(){
        return this.$store.state.sum;
    },
    tenSum(){
        return this.$store.getters.tenSum;
    }
},

页面呈现

 

 

mapState, mapGetters

使用mapstate、mapGetters可以在组件使用store里state和getters的数据时，能简化声明，只需在组件的computed里简单使用即可，可以分贝映射state和getters里的数据到computed的数据。

在组件中引入vuex的mapState，mapGetters，并在computed里配置映射

import {mapState, mapGetters} from "vuex"
    export default {
        name: "MyCount",
        data(){
            return {
                num: 2,
                // sum: 1
            }
        },
        //使用计算属性声明sum并重store取值
        computed: {
            // sum(){
            //     return this.$store.state.sum;
            // },
            // tenSum(){
            //     return this.$store.getters.tenSum;
            // }

            //对象写法{name: 'value'}, 可以重命名
            ...mapState({sum: 'sum'}),

            //名字相同，可以使用数组写法
            ...mapGetters(['tenSum'])
        },

 

 

mapMutations，mapActions

mapMutations和mapActions可以分别映射store里action和mutations的方法到组件中，自己无需在定义一个方法去调用action和mutations的方法。

mapMutations映射会自动封装调用this.$store.commit方法，无法传递参数，需在模板中传递；

mapActions映射会自动封装调用this.$store.dispatch方法，无法传递参数，需在模板中传递；

在组件中引入vuex的mapMutations和mapActions，并在methods里进行配置映射

<!-- num参数在此传入，映射方式无法传递参数 -->
<button @click="increment(num)">加</button>
<button @click="decrement(num)">减</button>
<button @click="waitIncrement(num)">等待1s后加</button>


methods: {
    ...mapMutations({increment: 'INCREMENT', decrement: 'DECREMENT'}),
    ...mapActions(['waitIncrement'])

    // increment(){
    //     //使用commit方法能直接调用mutations里的方法
    //     this.$store.commit('INCREMENT', this.num);
    // },
    // decrement(){
    //     this.$store.commit('DECREMENT', this.num);
    // },
    // waitIncrement(){
    //     //使用dispatch方法能直接调用acitons里的方法
    //     this.$store.dispatch('waitIncrement', this.num);
    // }
}

多组件间共享数据

数据在state里或者是getters里存放，如需使用，可直接使用mapState/mapGetter映射即可。

新建组件OtherComponent，并映射mapState、mapGetter使用

<template>
    <div>
        <hr>
        <p>我是其他的组件，MyCount中和为：{{sum}}</p>
        <p>我是其他的组件，MyCount中和的10倍为：{{tenSum}}</p>
    </div>
</template>

<script>
    import {mapState, mapGetters} from 'vuex'
    export default {
        name: "OtherComponent",
        computed: {
            ...mapState(['sum']),
            ...mapGetters(['tenSum'])
        }
    }
</script>

App.vue中引入OtherComponent组件用使用

<template>
    <div id="app">
        <MyCount/>
        <OtherComponent/>
    </div>
</template>

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

效果展现

 

模块化+命名空间

  • 同一功能类型封装在一起，多种数据分类清晰，方便后期维护

将store/index.js里的关于求和的属性和方法，封装为count.js

export default {
    //使用命名空间
    namespaced: true,
    actions: {
        waitIncrement(context, value){
            setTimeout(()=>{
                context.commit('INCREMENT', value);
            }, 1000)
        }
    },
    mutations: {
        INCREMENT(state, value){
            state.sum += value;
        },
        DECREMENT(state, value){
            state.sum -= value;
        }
    },
    state: {
        sum: 10
    },
    getters: {
        //这里注意，传入state参数
        tenSum(state){
            return state.sum * 10;
        }
    }
}

组件使用map映射时，给定命名空间

//对象写法{name: 'value'}, 可以重命名
...mapState('countAbout', {sum: 'sum'}),

//名字相同，可以使用数组写法
...mapGetters('countAbout', ['tenSum'])

...mapMutations('countAbout', {increment: 'INCREMENT', decrement: 'DECREMENT'}),

...mapActions('countAbout', ['waitIncrement'])

直接使用$store单独调用时

//state
this.$store.state.countAbout.sum;

//getters
this.$store.getters["countAbout/tenSum"];

//commit
this.$store.commit('countAbout/INCREMENT', this.num);

//dispatch
this.$store.dispatch('countAbout/waitIncrement', this.num);
TalonDream
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE学习总结
weixin_43196440的博客
11-10 758
最近在学习Vue，下面是学习过程中总结了一些基本的知识点。
Vue知识点总结
xfhgxhhhg的博客
08-02 6782
vue的知识框架。
前端学习总结
qq_38192821的博客
05-18 563
JavaScript，Vue2，Vue3。
vue学习总结
Long_gone的博客
10-23 546
一、变量 <div id="app"> <span>{{msg}}</span> <div> <script src="vue.js></script> <script> var vm = new Vue({ el:"#app", data:{ msg:"123" } }) </script> 二、识别标签 三、绑定事件
Vuex详解.pptx
08-05
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 状态管理到底是什么？ 状态管理模式、集中式存储管理这些...
前端vue常用模板,学习总结
07-13
下面，我们将根据提供的标题“前端vue常用模板,学习总结”以及描述“总结的模板”，深入探讨Vue.js中的常用模板和学习要点。 一、Vue模板基础 Vue模板语言是基于HTML扩展的，它允许我们在HTML中嵌入逻辑和数据绑定...
vue-family-mindmap：用一张思维导图总结了Vue路由器| Vuex原始码与架构要点
02-06
Vue.js 是一个流行的前端JavaScript框架，它以组件化、易用性和灵活性著称。...同时，"vue-family-mindmap-master"可能包含了更详细的代码示例和讲解，帮助开发者深入学习这两个库的源码，提升对Vue生态系统的理解。
vue-demo-kugou：酷狗webapp演示（vue2.0 + vue-router + vuex）
02-23
总结，vue-demo-kugou项目展示了Vue.js如何结合Vue Router和Vuex构建一个功能完善的Web应用，通过组件化开发实现模块化，利用现代前端工具链进行高效开发和部署。对于初学者，这是一个了解和学习Vue.js实践应用的好...
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue基础知识（一）
hddpeag的博客
11-01 444
目录 概述 实例化参数new Vue 计算 computer 监听 watch 自定义指令 directives 过滤-管道 指令 动画 组件 一、概述 前端框架三驾马车 Vue React Angular Vue是一款渐进式JavaScript前端框架语言 作者：尤雨溪 官网：cn.vuejs.org 插件案例： https://github.com/opendigg/awesome-github-vue 特点： 1、简单，上手方便 2、结合Angular指令与React组件
Vuex学习总结
ych6666的博客
01-14 846
1.vuex是干什么的 vuex是一种状态管理模式，简单来说，就是把多个组件需要共享的变量全部存储在一个store对象中，然后，把这个store对象挂载到顶层vue实例中，让所有组件都可以共享这个对象中的所有变量属性 2.vuex的初使用 2.1安装 注意Vuex是个插件，你要想用，用脚手架初始化项目之后，得install npm install vuex –save 2.2初使用 在入口文件挂载store之后，vue默认做了一步： vue.prototype.$store = store 所有组件都可以
vuex
weixin_41034171的博客
01-17 204
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用: 首先要安装、使用 vuex 首先在 vue 2.0+ 你的vue-cli项目中安装 vuex ...
vuex 核心内容（学习总结）
qq_41261490的博客
07-24 509
vuex的由来：在父子组件通信中，只有父组件通过props向子组件通信，传递数据，而子组件不能向父组件传递数据。这时候就出现了vuex。vuex作为数据的管理，将共享的数据单独的列出来，做一系列操作。通过注入到根组件，全局可用。 vuex有五大核心： state： 共享的状态（-对象形式） getters： 为了取得state的状态，就有了getters，getters对...
vuex知识点总结
好好学习，天天向上！
01-06 804
1. 什么是vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态。 Vuex 是单向数据流的一种实现。 以下是一个表示“单向数据流”理念的简单示意 vuex它由五部分组成 state: 用来存状态 actions:可以包含异步操作 mutations: 唯一可以修改state数据的场所 getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存） modules:模块化管理store（仓库），每个模块拥
vuex 学习总结
cyadyx的博客
09-08 179
算是学习记录VUE以及项目中使用的地方 vue 的全家桶已经不再是难的技术，视乎成为前端开发人员必备的技能之一了，公司项目很早就从jQuery 转换成VUE React等，记录学习也是自我的进步。 文章目录算是学习记录VUE以及项目中使用的地方安装、一、state二、Getter三、 Mutation四、 Action五、 Module（暂时没有去使用） 安装、 提示：这里可以添加本文要记录的大概内容： npm install vuex --save 通过 Vue.use() 来安装 Vuex im
vue3中的vuex
最新发布
08-24
总结来说，在Vue3中的Vuex是一个用于集中管理应用程序状态的库，可以通过创建一个store实例来使用它，并且可以实现组件间的数据共享和交互。<span class="em">1</span><span class="em">2</span><span class="em">3 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值