-
父向子传值:v-bind 属性绑定
-
子向父传值:v-on 事件绑定
-
$on 接收数据的那个组件
-
$emit 发送数据的那个组件
-
其他的传值方式:
-
ref 获取dom元素还有组件
-
$children获取子组件集合
-
$parent获取父组件
-
路由参数--组件传值
1.Vuex概述
1 1.Vuex概述
-
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享
1.2 使用Vuex管理数据的好处:
-
能够在vuex中集中管理共享的数据,便于开发和后期进行维护
-
能够高效的实现组件之间的数据共享,提高开发效率
-
存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新
1.3 什么样的数据适合存储到 Vuex 中
一般情况下,只有组件之间共享的数据,才有必要存储到 vuex 中;对于组件中的私有数据,依旧存储在组件 自身的 data 中即可。
vuex中通常会保存哪些数据? 网站的名称,用户信息,token,商品数量等等。
2. Vuex 的基本使用
1. 安装 vuex 依赖包
npm instaall vuex --save
2. 导入 vuex 包
// import store from './store' 已经给你引入ok了
import Vuex from 'vuex'
Vue.use(Vuex)
3. 创建 store 对象
const store = new Vuex.Store({
// state 中存放的就是全局共享的数据
state: { count: 0 }
})
4. 将 store 对象挂载到 vue 实例中
new Vue({
el: '#app',
render: h => h(app),
router,
// 将创建的共享数据对象,挂载到 Vue 实例中
// 所有的组件,就可以直接从 store 中获取全局的数据了
store
})
5. 创建带有vuex的vue项目,打开终端,输入命令:vue ui
3.使用Vuex完成计数器案例
6.1打开刚刚创建的vuex项目,找到src目录中的App.vue组件,将代码重新编写如下:
<template>
<div>
<my-addition></my-addition>
<p>----------------------------------------</p>
<my-subtraction></my-subtraction>
</div>
</template>
<script>
import Addition from './components/Addition.vue'
import Subtraction from './components/Subtraction.vue'
export default {
data() {
return {}
},
components: {
'my-subtraction': Subtraction,
'my-addition': Addition
}
}
</script>
<style>
</style>
6.2在components文件夹中创建Addition.vue组件,代码如下:
<template>
<div>
<h3>当前最新的count值为:</h3>
<button>+n</button>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
</style>
6.3在components文件夹中创建Subtraction.vue组件,代码如下:
<template>
<div>
<h3>当前最新的count值为:</h3>
<button>-n</button>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
</style>
4.Vuex中的核心特性
4.1 Vuex 中主要核心:
-
State,控制所有的共享数据
-
Mutation,只能在Mutation中修改State中的数据
-
Action,执行异步操作
-
Getter,用于对Store中的数据进行加工处理形成新的数据
4.2.State
-
State提供唯一的公共数据源,所有共享的数据都要统一放到Store中的State中存储
例如,打开项目中的store.js文件,在State对象中可以添加我们要共享的数据,如:count:0
// 创建store数据源,提供唯一公共数据
const store = new Vuex.Store({
state: {
count: 0
}
})
在组件中访问State的方式:2种
在组件中访问State的方式:
1).this.$store.state.全局数据名称 如:this.$store.state.count
<h3>当前最新的count值为:{{this.$store.state.count}}</h3>
2).先按需导入mapState函数: import { mapState } from 'vuex'
然后数据映射为计算属性: computed:{ ...mapState(['全局数据名称']) }
<template>
<div>
<h3>当前最新的count值为:{{count}}</h3>
<button>-n</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data () {
return {}
},
computed: {
//扩展运算符
...mapState(['count'])
}
}
</script>
4.3.Mutation
-
Mutation用于修改变更$store中的数据
1 只能通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据。 2 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。
使用方式: 打开store.js文件,在mutations中添加代码如下
mutations: {
add(state,step){
//第一个形参永远都是state也就是$store对象
//第二个形参是调用add时传递的参数
state.count+=step;
}
}
然后在Addition.vue中给按钮添加事件代码如下:
<button @click="Add">+n</button>
methods:{
Add(){
//使用commit函数调用mutations中的对应函数,
//第一个参数就是我们要调用的mutations中的函数名
//第二个参数就是传递给add函数的参数
//固定触发mutations中的方法
this.$store.commit('add',10)
}
}
使用mutations的第二种方式:
mutations: {
add(state, step) {
state.count += step
},
sub(state, step) {
state.count -= step
}
},
在Subtraction.vue组件中
import { mapMutations } from 'vuex'
methods:{
...mapMutations(['sub'])
}
如下:
<button @click="Sub">-n</button>
import { mapState,mapMutations } from 'vuex'
export default {
data() {
return {}
},
methods:{
//获得mapMutations映射的sub函数
...mapMutations(['sub']),
//当点击按钮时触发Sub函数
Sub(){
//调用sub函数完成对数据的操作
this.sub(10);
}
},
computed:{
...mapState(['count'])
}
}
4.4.Action
-
在mutations中不能编写异步的代码,会导致vue调试器的显示出错。
-
在vuex中我们可以使用Action来执行异步操作。
-
如果通过异步操作变更数据,必须通过 Action,而不能使用 Mutation,但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。操作步骤如下: 打开store.js文件,修改Action,如下:
-
//mutations只能处理同步任务,比如定时器,ajax,异步任务就一定不可以去操作mutations //actions 是专门处理异步任务的,但是没有权限修改store中的数据。 // 那就在actions中调用mutations中的方法,间接去修改state中的数据 //这里的context就是store对象 actions: { addAsync(context, step) { // 在action中不能直接修改state中的数据, // 必须通过context.commit()触发某个mutation才行 context.commit('add', step); } }, actions: { addAsync(context, step) { setInterval(() => { context.commit('add', step); },1000) }
然后在Addition.vue中给按钮添加事件代码如下:
-
<button @click="AddAsync(10)">+10</button> methods: { AddAsync(n) { //固定触发action中的异步方法 this.$store.dispatch("addAsync", n); }, }
在Subtraction.vue组件中
-
import { mapActions } from 'vuex' methods:{ ...mapActions(["subAsync"]), SubAsync(n) { this.subAsync(n); }, }
4.5.Getters
-
Getter用于对Store中的数据进行加工处理形成新的数据
-
它只会包装Store中保存的数据,并不会修改Store中保存的数据,
-
当Store中的数据发生变化时,Getter生成的内容也会随之变化 打开store.js文件,添加getters,如下:
-
export default new Vuex.Store({ ....... getters:{ //添加了一个showNum的属性 showCount(state) { return '最新的count值为:' + state.count } } })
第一种方式
然后打开Addition.vue中,添加插值表达式使用getters
-
<h3>{{$store.getters.showCount}}</h3>
-
第二种方式
-
<h5>{{ showCount }}</h5> 在Subtraction.vue,导入mapGetters,并将之映射为计算属性 import { mapGetters } from 'vuex' computed:{ ...mapGetters(['showNum']) }
4.6总结
-
修改state状态必须通过
mutations
-
mutations
只能执行同步代码,类似ajax,定时器之类的代码不能在mutations中执行 -
执行异步代码,要通过actions,然后将数据提交给mutations才可以完成
-
state的状态即共享数据可以在组件中引用
-
组件中可以调用action