网站3级目录可以做导航分类么,做游戏直播那个网站,我的世界做神器指令网站,长沙设计网站公司#x1f680; 个人简介#xff1a;6年开发经验#xff0c;现任职某国企前端负责人#xff0c;分享前端相关技术与工作常见问题~ #x1f49f; 作 者#xff1a;前端菜鸟的自我修养❣️ #x1f4dd; 专 栏#xff1a;vue从基础到起飞 #x1f308; 若有帮助 个人简介6年开发经验现任职某国企前端负责人分享前端相关技术与工作常见问题~ 作 者前端菜鸟的自我修养❣️ 专 栏vue从基础到起飞 若有帮助还请 关注➕点赞➕收藏 不行的话我再努努力 前言本文讲解【Vuex核心概念和API】【Vuex使用场景】【Vuex初始化仓库】等内容并结合具体代码让小伙伴们深入理解 彻底掌握
文章目录
一、Vuex 概述
1.是什么
2.使用场景
3.优势
4.注意
二、vuex 核心概念和 API
1. state
2. actions
3. mutations
4. getters
三、vuex 的使用 - 创建仓库
1.安装 vuex
2.新建 store/index.js 专门存放 vuex
3.创建仓库 store/index.js
4 在 main.js 中导入挂载到 Vue 实例上
5.测试打印Vuex 一、Vuex 概述
目标明确Vuex是什么应用场景以及优势
1.是什么
Vuex 是一个 Vue 的 状态管理工具状态就是数据。
大白话Vuex 是一个插件可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如购物车数据、个人信息数 2.使用场景 某个状态 在 很多个组件 来使用 (个人信息) 多个组件 共同维护 一份数据 (购物车) 3.优势 共同维护一份数据数据集中化管理 响应式变化 操作简洁 (vuex提供了一些辅助函数) 4.注意
官方原文 不是所有的场景都适用于vuex只有在必要的时候才使用vuex 使用了vuex之后会附加更多的框架中的概念进来增加了项目的复杂度 数据的操作更便捷数据的流动更清晰
Vuex就像《近视眼镜》, 你自然会知道什么时候需要用它~ 二、vuex 核心概念和 API
1. state
vuex 管理的状态对象它应该是唯一的
//准备state——用于存储数据
const state {sum:0 //当前的和
}2. actions
值为一个对象包含多个响应用户动作的回调函数通过 commit( )来触发 mutation 中函数的调用, 间接更新state如何触发 actions 中的回调 在组件中使用: $store.dispatch(对应的 action 回调名) 触发可以包含异步代码定时器, ajax 等等
//准备actions——用于响应组件中的动作
const actions {jia(context,value){console.log(actions中的jia被调用了)context.commit(JIA,value)}
}3. mutations
值是一个对象包含多个直接更新 state 的方法谁能调用 mutations 中的方法如何调用 在 action 中使用commit(对应的 mutations 方法名) 触发mutations 中方法的特点不能写异步代码、只能单纯的操作state
//准备mutations——用于操作数据state
const mutations {JIA(state,value){console.log(mutations中的JIA被调用了)state.sum value}
}4. getters
值为一个对象包含多个用于返回数据的函数如何使用—— $store.getters.xxx示例代码
//准备getters——用于将state中的数据进行加工
const getters {bigSum(state){return state.sum*10}
}三、vuex 的使用 - 创建仓库 1.安装 vuex
安装vuex与vue-router类似vuex是一个独立存在的插件如果脚手架初始化没有选 vuex就需要额外安装。 yarn add vuex3 或者 npm i vuex3 2.新建 store/index.js 专门存放 vuex
为了维护项目目录的整洁在src目录下新建一个store目录其下放置一个index.js文件。 (和 router/index.js 类似)
3.创建仓库 store/index.js
// 导入 vue
import Vue from vue
// 导入 vuex
import Vuex from vuex
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)// 创建仓库 store
const store new Vuex.Store()// 导出仓库
export default store
4 在 main.js 中导入挂载到 Vue 实例上 import Vue from vueimport App from ./App.vueimport store from ./storeVue.config.productionTip falsenew Vue({render: h h(App),store}).$mount(#app)
此刻起, 就成功创建了一个 空仓库!!
5.测试打印Vuex
App.vue created(){console.log(this.$store)}创作不易喜欢这篇文章的小伙伴 关注收藏 哦~❣️ 更多专栏订阅推荐 前端工程搭建 JavaScript深入研究 前端工作常见问题汇总
