【Vue_06】VueX
一、Vuex 概述
1. 什么是 Vuex
1.Vuex 是为 Vue.js 应用程序开发的状态管理模式。采用集中式存储管理应用所有组件的状态，并以相应的规则保证状态以可预测的方式发生变化。 2.能够在vuex中集中管理共享的数据，便于开发和后期进行维护。 3.能够高效的实现组件之间的数据共享，提高开发效率。 4.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新。
在这里插入图片描述
2. Vuex 的基本使用
- 安装
npm install vuex --save- 创建 store.js 文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 数据
},
// 只有 mutations 中定义的函数，才有权利修改 state 中的数据
mutations: {
// 方法
},
actions: {
methodAsync(context) {
// 异步操作
},
},
getters: {
// 数据加工
}
})- 将 store 挂载到 Vue 实例
new Vue({
store,
render: h => h(App)
}).$mount('#app')二、Vuex 核心
1. state
2. Mutation
3. Action
4. Getter
Getter 是什么
Getter 用于对 Store 中的数据进行加工处理形成新的数据，它只会包装 Store 中保存的数据，并不会修改 Store 中保存的数据。 当 Store 中的数据发生变化时，Getter 生成的内容也会随之变化
Getter 的使用方式
// 在 store.js 中添加 getter 属性
getters:{
//添加了一个属性
属性名 : state => {
return "修饰后的内容";
}
}
/*
方式一
*/
// 在对应 vue 组件中使用以下方式
this.$store.getters.属性名
/*
方式二
*/
// 1. 在对应 vue 组件中引入 mapGetter
import { mapGetters } from 'vuex'
// 2. 将 Getter 属性映射为 计算属性
computed:{
...mapGetters(['showNum'])
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
