vuex概述
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
1.1vuex概念
vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享
1.2vuex和组件通信的对比
组件通信和vue都可以实现组件之间的数据共享,组件通信的优点在于实现了数据的私有化,不会造成数据混乱;缺点是对于层级关系不明确或层级较深的组件使用起来不方便
vuex的优点:
能够在vuex中集中管理共享的数据,易于开发和后期的维护
能够高效地实现组件之间的数据共享,提高开发效率
存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
vue的缺点:
刷新页面,数据重新渲染
使用不当,很容易造成数据混乱
1.3vuex使用场景
一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,依旧存储在组件自身的data中即可。
vuex的基本使用
2.1安装
yarn add vuex
或
npm i vuex
2.2使用步骤
单项数据流:
![](https://i-blog.csdnimg.cn/blog_migrate/55f6b2c4ee5373e452499f4da0ccc723.png)
总结:
创建store对象
组件commit一个任务(同步)
mutatins接收commit过来的任务,修改数据
组件渲染数据
使用步骤:
安装
导入vuex包
import Vue from 'vue';
import vuex from 'vuex';
// 注册
Vue.use(vuex);
创建store对象
export default new Vuex.Store({
// 用来存储所有组件的状态(数据)的
state: {
num: 0
},
mutations: {
// 在mutations里面接收任务,修改数据
add(state) {
// state就是store仓库中的state
state.num++;
}
}
})
将store对象挂载到vue实例中
// main.js
import store from './store'
new Vue({
store,
render: h => h(App),
}).$mount('#app')
组件commit一个任务
<button @click="add">点击</button>
// App.vue
methods: {
add() {
// this.$store.dispatch('任务名', 可选参数)
// 组件commit一个任务
this.$store.commit('add')
}
}
组件渲修改后数据
<template>
<div>
<h1>我是cmp1组件</h1>
<!-- 组件渲染修改后的数据 -->
<div>{{ $store.state.num }}</div>
</div>
</template>
vuex应用核心特性
3.1state
用于存储vuex中的状态的属性
定义state
const store = Vuex.Store({
// 用来存储所有组件的状态(数据)的
state: {
num: 0
}
})
获取state中的数据
1.第一种方式
通过全局对象$tore获取state状态
<div>{{ $store.state.num }}</div>
2.第二种方式
引入mapState函数
import { mapState } from 'vuex';
将state中的数据映射到计算属性computed中
computed: {
...mapState(['num'])
}
渲染数据
<div>{{ num }}</div>