【无标题】vue的五大核心

这篇具有很好参考价值的文章主要介绍了【无标题】vue的五大核心。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.0 Vuex 状态管理库

Vuex是一个Vue的插件,用于管理状态( 数据 )

Vuex作用场景:

  • 祖先组件向子孙组件传递数据,层级非常深

  • 多个组件间的数据共享

Vue的核心功能

核心State

用于注册、存放数据的仓库

export default new Vuex.Store({
  // 存储状态(数据)
  state: {
    num: 250,
    goods: [
    ],
    // 白马会员列表
    whiteHorseVip: [
      { name: '凯子哥', age: 24 },
      { name: '黄子姐', age: 22 },
      { name: '维子哥', age: 26 },
      { name: '俊子哥', age: 18 }
    ]
  }
})

1、直接获取仓库的数据

<template>
  <div>
    <div>num:{{ $store.state.num }}</div>
    <div>
      goods:
      <p v-for="item in $store.state.goods"
        :key="item.name"
      >{{ item.name }} --{{ item.price*item.count }}</p>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    console.log(this.$store.state.num);
  }// 推荐
  computed: {
    num() {
      return this.$store.state.num;
    },
    goods() {
      return this.$store.state.goods;
    }
  },
};
</script>

2、通过辅助函数获取仓库数据

mapState 特点:map 映射 State仓库 : 与仓库里的state一一对应

import {mapState} from 'vuex'
export default{
    computed:{
        // 辅助函数的数组写法
        ...mapState(['要取变量1''要取变量2']), 【强烈推荐】
        // 辅助函数对象写法
        ...mapState({
        	key:(state)=>state.要取变量1,
    		key1:(state)=>state.要取变量2,
    	})
    }
}

核心Mutations

用于修改仓库数据的唯一方法,如果要修改仓库的数据必须提交一个mutation

// 定义修改的方法,mutation
export default new Vuex.Store({
  // 存储状态(数据)
  state: {
    num: 250,
    goods: []
  },
  // 修改数据的唯一方法,如果要修改状态必须提交一个mutation
  mutations: {
	// 定义一个修改mutation - 函数名一般为全大写
	函数名(state,payload){
		state.goods = payload
	}
  },
})


// 在你的页面直接提交mutation变化,用于修改仓库的数据
this.$store.commit('函数名',实参)
this.$sotre.commit({ 【不推荐】
	type:'函数名',
	data:实参
})

// 通过辅助函数提交mutation
import {mapMutations} from 'vuex'

export default{
	methods:{
		// 辅助函数的数组写法
		...mapMutations(['函数名'])
		// 辅助函数的对象写法
		...mapMutations({
			key:'函数名1',
			key2:'函数名2'
		})
	}

}

核心Getters

相当与状态管理库的计算属性,对state进行二次处理

// 定义getter处理方法
export default new Vuex.Store({
  // 存储状态(数据)
  state: {
    num: 250,
    goods: [
    ],
    // 白马会员列表
    whiteHorseVip: [
      { name: '凯子哥', age: 24 },
      { name: '黄子姐', age: 22 },
      { name: '维子哥', age: 26 },
      { name: '俊子哥', age: 18 }
    ]},
  // vuex里的计算属性
  getters: {
    // 把数据进行二次处理
    whiteHorseVipList(state) {
      return state.whiteHorseVip.filter(v => v.age > 18)
    }
  }
})

// 在页面获取getters里的属性
<template>
  <div>
    <div>num:{{ $store.getters.whiteHorseVipList }}</div>
    <div>
      goods:
      <p v-for="item in $store.getters.whiteHorseVipList"
        :key="item.name"
      >{{ item.name }} --{{ item.age }}</p>
    </div>
  </div>
</template>

<script>
export default {
  // 推荐
  computed: {
    whiteHorseVipList() {
      return this.$store.getters.whiteHorseVipList;
    }
  },
};
</script>

// 辅助函数获取getters属性
import {mapGetters} from 'vuex'
export default{
    computed:{
        // 辅助函数的数组写法
        ...mapGetters(['whiteHorseVipList'])
    }
}

核心Actions

用于异步修改数据,但是最终修改数据还是需要调用mutation方法

// 在仓库中定义actions
export default new Vuex.Store({
  // 存储状态(数据)
  state: {
    num: 250,
  },
  // 修改数据的唯一方法,如果要修改状态必须提交一个mutation
  mutations: {
    SET_NUM(state, payload) {
      state.num += payload
    }
  },
  // 处理异步修改数据,最终也要提交一个mutation
  actions: {
    asyncSetNum(context, payload) { // context === new Vuex()
      return new Promise(reslove => {
        // 异步操作
        setTimeout(() => {
          context.commit('SET_NUM', payload)
          reslove()
        }, 2000);

      })
    }
  },
})

// 在页面触发actions的方法

// 直接触发
this.$store.dispatch('函数名',实参)
this.$store.dispatch({ 【不推荐】
    type:'函数名'',
    data:'实参'
})

// 辅助函数
import {mapActions} from 'vuex'
export default{
    methods:{
        // 数组写法
        ...mapActions(['函数名']),
        
        // 对象写法
        ...mapActions({
            键名:'函数名'
        })
    }
}

核心modules

模块化,拆分你的仓库

1 定义模块化的仓库

export default new Vuex.Store({

  // 模块,把仓库拆分成多个
  modules: {
    moduleA: {
      namespaced: true,
      state: {
        money: 1000000
      },
      getters: {},
      mutations: {},
      actions: {}
    },
    moduleB: {
      namespaced: true,
      state: {
        money: 10
      },
      getters: {},
      mutations: {},
      actions: {}
    }
  }
})

2 获取模块化里的状态(数据)

// 直接获取
this.$store.state.模块名.属性名;
// 辅助函数获取

修改模块里的数据文章来源地址https://www.toymoban.com/news/detail-460671.html

<template>
  <div>
    home
    <h1>moneyA:{{ moneyA }}</h1>
    <h1>moneyB:{{ moneyB }}</h1>

    <div>money:{{ money }}</div>
    <button @click="SET_MONEY(100)">改变</button>
    <button @click="update">直接改变</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  created() {
    console.log(this.$store);
  },
  computed: {
    // 辅助函数mpaState获取模块里的数据
    ...mapState("moduleA", ["money"]),
    moneyA() {
       // 直接获取modelA里state的属性
      return this.$store.state.moduleA.money;
    },
    moneyB() {
        // 直接获取modelB里state的属性
      return this.$store.state.moduleB.money;
    }
  },
  methods: {
     // 模块化里获取辅助函数
    ...mapMutations("moduleA", ["SET_MONEY"]),
    update() {
     // 直接调用模块化里的方法
      this.$store.commit("moduleA/SET_MONEY", 200);
    }
  }
};
</script>


到了这里,关于【无标题】vue的五大核心的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vuex状态管理】Vuex的基本使用;核心概念State、Getters、Mutations、Actions、Modules的基本使用

    在开发中,应用程序需要处理各种各样的数据,这些数据需要保存在应用程序中的某一个位置,对于这些数据的管理就称之为是 状态管理。 在前面是如何管理自己的状态呢? 在Vue开发中,使用组件化的开发方式; 而在组件中定义data或者在setup中返回使用的数据,这些数据称

    2024年02月07日
    浏览(46)
  • Java扩展Nginx之五:五大handler(系列最核心)

    这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本文是《Java扩展Nginx》系列的第五篇,如题,本篇是整个系列的最核心内容,咱们写的代码主要都集中在nginx-clojure定义的五种handler中,不同handler分别发挥着各自的作用,它们是: Initialization Handl

    2024年02月16日
    浏览(29)
  • Xline v0.6.1: 一个用于元数据管理的分布式KV存储

    Xline是什么?我们为什么要做Xline? Xline是一个基于Curp协议的,用于管理元数据的分布式KV存储。 现有的分布式KV存储大多采用Raft共识协议,需要两次RTT才能完成一次请求。当部署在单个数据中心时,节点之间的延迟较低,因此不会对性能产生大的影响。 但是,当跨数据中心

    2024年01月20日
    浏览(50)
  • 前端Vue仿美团地址管理组件列表组件 可用于电商平台收获地址管理

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(40)
  • sqlite3 是一个命令行工具,用于与 SQLite 数据库进行交互和管理

    sqlite3 example.db sqlite3 new_database.db sqlite3 -init init_script.sql example.db

    2024年02月09日
    浏览(62)
  • springcloud-alibaba五大核心组件-后端开发工程(脚手架)搭建

    Gitee仓库地址 点我 服务注册与发现: nacos 配置中心: nacos 服务远程调用: openfeign 微服务网关: gateway 服务限流降级熔断等: sentinel 实现的功能demo openfeign服务远程调用 sentinel限流测试 gateway网关调用2个微服务 nacos的服务注册与发现 软件架构(环境) jdk: 1.8 maven: 3.5.2 nacos: 注册中心

    2024年02月05日
    浏览(52)
  • Vue——状态管理库Pinia

    写在前面 :本文参考小满大牛的pinia专栏 Vuex 和 Pinia 均是 Vue.js 的状态管理库,它们为 Vue 应用程序提供了一种集中式的、可预测的状态管理解决方案。 Vuex 是 Vue.js 官方推荐的状态管理库之一。它的核心概念包括 state、mutation、action 和 getter。其中,state 代表应用程序的状态

    2024年02月07日
    浏览(41)
  • Vue状态管理库-Pinia

    Pinia 是 Vue 的专属状态管理库,它允许支持跨组件或页面共享状态,即共享数据,他的初始设计目的是设计一个支持组合式API的 Vue 状态管理库(因为vue3一个很大的改变就是组合式API),当然这并不是说Pinia只支持vue3,他是同时支持vue2和vue3的, 本文倾向于拥抱Vue3,所以代码语

    2024年02月22日
    浏览(54)
  • Vue--》探索Pinia:Vue状态管理的未来

    目录 Pinia的讲解与使用 Pinia的安装与使用 store数据操作 解构store数据

    2024年02月05日
    浏览(40)
  • Vue使用 Pinia 进行状态管理

    Pinia 是一个适用于 Vue.js 的状态管理库,它采用了组合式 API 的理念,使得状态管理变得更加简单、直观和灵活。与传统的 Vuex 相比,Pinia 提供了更好的 TypeScript 支持,同时也更加适合大型应用程序和复杂状态逻辑的管理。 首先,我们需要在 Vue 项目中安装 Pinia。你可以通过

    2024年02月13日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包