114.【Vue-细刷-05】
- (1).props映射自定义的静态数据给当前的路由
- (2).映射params参数为props传给路由组件 (只兼容params)⭐
- (3).propos是一个函数 (兼容params和query)
- (4).props函数里面有一个参数 （常用⭐⭐⭐⭐）
(二十八)、Vuex
1.Vuex的简介
(1).vuex是什么
- 专门在Vue中实现集中式状态管理的一个插件，对Vue应用中的多个组件的共享状态进行集中式的管理(读/写),也可以认为是一种组件间通信的方式，且适用于任意组件间通信。
- github 站点: https://github.com/vuejs/vuex
- 在线文档: https://vuex.vuejs.org/zh/guide/
(2).什么时候使用Vuex
- 多个组件依赖同一状态。
- 来自不同组件的行为需要变更容易状态。
- 多个组件要共享状态。
(3).Vuex工作原理图
2.求和案列_纯Vue版本
App.vue
<template> <div> <Count/> </div> </template> <script> import Count from './components/Count.vue' export default { name:'App', components:{ Count, } } </script> <style> </style>
Count.vue
<template> <div> <h2>当前求和未: {{ sum }}</h2> <!-- v-model.number意思是: 我们接受到的数据是数值 --> <select name="" id="" v-model="n"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button @click="increment">+</button> <button @click="decrement">-</button> <button @click="incrementOdd">奇数再加</button> <button @click="incrementAsync">异步加</button> </div> </template> <script> export default { name: "Count", data() { return { sum: 0, //总和 n: 1, // }; }, methods: { increment() { this.sum += this.n; }, decrement() { this.sum -= this.n; }, incrementOdd() { if (this.sum%2){ // 0 为假、1为真 this.sum += this.n; } }, // 异步+ incrementAsync() { setTimeout(()=>{ // 函数体 this.sum += this.n; },500) }, }, }; </script> <style> </style>
修改代码为:
<!-- v-model.number意思是: 我们接受到的数据是数值 --> <select name="" id="" v-model.number="n"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>
