TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
忆点点
情不知从何起,一往而情深
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net
35篇
.net core
15篇
cdn
1篇
云服务
1篇
前端
72篇
后端
6篇
随笔
19篇
架构
1篇
linux
6篇
git
3篇
virtualbox
1篇
app
1篇
英语
4篇
redis
4篇
docker
4篇
更多
mysql
6篇
sqlsugar
4篇
uni_app
4篇
数据库
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
转
Vuex 的基本用法,Vuex入门
1332
人阅读
2023/6/30 17:42
总访问:
795378
评论:
0
收藏:
0
手机
分类:
前端
### 一、Vuex 概述 #### 1.1 传统的组件之间的共享数据方式 - 父向子传值: v-bind - 子向父传值:v-on - 兄弟组件之间共享数据:EvenBus - $on 接受数据的那个组件 - $emit 发送数据的那个组件 缺点:只能通过父传子 和 子传父的方式传值,若想要两个毫无关系的组件传值则很繁琐(需要找到 他们之间的关系) #### 1.2 Vuex是什么 **vuex** 是实现组件全局状态管理的一种机制,可以方便组件之间的数据共享 ### 二、Vuex初始化 store.js ``` import Vue from 'vue' import vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state:{ }, mutations:{ }, actions:{ } }) ``` main.js ``` import Vue from 'vue' import App from './App.vue' import store from './store' Vue.config.productionTip = false new Vue({ store, render: h=>h(app) }).$mount('#app') ``` ### 三、Vue 的核心概念 - state - mutations - actions - Getter #### 3.1 State 第一种方式: 用与存放公共的数据,类似于 vue 中的 data 属性 this.$store.state.count ``` // 创建 store 数据源, 提供唯一公共数据 // Store.js const store = new Vuex.Store({ state:{ count:0 } }) // 目标组件中 this.$store.state.count ``` 第二种方式 ...mapState(['count']) ``` // 目标组件中 // 1. 从 vuex 中按需导入 mapState 函数 import { mapState } from 'vuex' // 2. 将全局数据,映射为当前组件的计算属性 computed:{ ...mapState(['count']) } ``` #### 3.2 mutations 用于变更 Store 中的数据 第一种方式 this.$store.commit() ``` // Store.js // 定义 Mutation const store = new Vuex.Store({ state:{ count:0 }, mutations:{ add(state){ state.count++ } } }) ``` ``` // 目标组件 // 调用 mutation methods:{ handle1(){ // 触发 mutations 的第一种方式 this.$store.commit('add') } } ``` 可以在触发 mutations 时传递参数: ``` // Store.js // 定义 Mutation const store = new Vuex.Store({ state:{ count:0 }, mutations:{ addN(state,step){ //变更状态 state.count += step } } }) ``` ``` // 目标组件 // 调用mutation methods:{ handle2(){ // 在调用 commit 函数触发 mutations 时携带参数 this.$store.commit('addN',3) } } ``` 第二种方式 ...mapMutations(['add','addN']) ``` // 目标组件 // 1. 从 vuex 中按需导入 mapMutations 函数 import { mapMutations } from 'vuex' .... // 2. 将指定的 mutations 函数,映射为当前组件的 methods 函数 methods:{ ...mapMutations(['add','addN']), btnHandler1(){ this.add() } btnHandler2(){ this.addN(3) } } ``` #### 3.3 Action 触发 actions 异步任务时携带参数: 第一种方式 this.$store.dispatch() ``` // Store.js // 定义 Action const store = new Vuex.Store({ // ...省略其他代码 mutations:{ addN(state,step){ state.count += step } }, actions:{ addNAsync(context,step){ setTimeout(()=>{ // 在 actions 中,不能直接修改 state 中的数据 // 必须通过 context.commit() 触发某个 mutation 才行 context.commit('addN',setp) },1000) } } }) ``` ``` // 目标组件 methods:{ handle(){ // 在调用 dispatch 函数 // 触发 actions 时携带参数 this.$store.dispatch('addNasync',5) } } ``` 第二种方式 ...mapActions({'addAsync','addNaSync'}) ``` // 目标组件中 // 1.从 vuex 中按需导入 mapActions 函数 import { mapActions } from 'vuex' // 2.将指定的 actions 函数,映射为当前组件的 methods 函数 methods:{ ...mapActions({'subAsync'}), // 以下这个函数可以不要,需要调用函数时直接调用 subAsync 这个函数名 btnHandler3(){ this.subAsync() } } ``` #### 3.4 Getter Getter 用于对Store 中的数据进行加工梳理形成的新数据 - 1:Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性 - 2:Store 中数据发生变化,Getter 的数据也会发生变化 - 3:Getter 不会修改 Store 中的数据,它只起到包装的作用 ``` // store.js // 定义 Getter const store = new Vuex.Store({ state:{ count:0 }, getters:{ showNum:state =>{ return '当前最新的数量是【'+state.count +'】' } ``` **第二种** ``` import { mapGetters } from 'vuex' computed:{ ...mapGetters(['showNum']) } ``` 原文:https://blog.csdn.net/qq_51688013/article/details/123304310
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}