把做的网站发布打万维网上,山东网站建设网,旅游门户系统,江西最新消息#x1f49d;#x1f49d;#x1f49d;欢迎来到我的博客#xff0c;很高兴能够在这里和您见面#xff01;希望您在这里可以感受到一份轻松愉快的氛围#xff0c;不仅可以获得有趣的内容和知识#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小… 欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。 ✨✨ 欢迎订阅本专栏 ✨✨ 前言
本栏目是根据黑马程序员的网课来整理的笔记也会结合我的一些个人见解来记录自己学习Vue的过程俗话说好记性不如烂笔头小郑喜欢在学习的过程中记笔记记下自己在学习过程中难以理解的知识点反复练习加深印象小郑打算在这个暑假的第一个月学习完Vue从0到1实现项目希望广大网友一起监督学习互相进步! 一、Vuex 概述
目标明确Vuex是什么应用场景以及优势
1.是什么
Vuex 是一个 Vue 的 状态管理工具状态就是数据。
大白话Vuex 是一个插件可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如购物车数据 个人信息数 2.使用场景 某个状态 在 很多个组件 来使用 (个人信息) 多个组件 共同维护 一份数据 (购物车) 3.优势 共同维护一份数据数据集中化管理 响应式变化 操作简洁 (vuex提供了一些辅助函数) 4.注意
官方原文 不是所有的场景都适用于vuex只有在必要的时候才使用vuex 使用了vuex之后会附加更多的框架中的概念进来增加了项目的复杂度 数据的操作更便捷数据的流动更清晰
Vuex就像《近视眼镜》, 你自然会知道什么时候需要用它~ 二、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 vue
import App from ./App.vue
import store from ./store
Vue.config.productionTip false
new Vue({render: h h(App),store
}).$mount(#app)
此刻起, 就成功创建了一个 空仓库!!
5.测试打印Vuex
App.vuecreated(){console.log(this.$store)
}
三、核心概念 - state 状态
1.目标
明确如何给仓库 提供 数据如何 使用 仓库的数据
2.提供数据
State提供唯一的公共数据源所有共享的数据都要统一放到Store中的State中存储。
打开项目中的store.js文件在state对象中可以添加我们要共享的数据。
// 创建仓库 store
const store new Vuex.Store({// state 状态, 即数据, 类似于vue组件中的data,// 区别// 1.data 是组件自己的数据, // 2.state 中的数据整个vue项目的组件都能访问到state: {count: 101}
})
3.访问Vuex中的数据
问题: 如何在组件中获取count? 通过$store直接访问 — {{ $store.state.count }} 通过辅助函数mapState 映射计算属性 — {{ count }} 4.通过$store访问的语法
获取 store1.Vue模板中获取 this.$store2.js文件中获取 import 导入 store
模板中 {{ $store.state.xxx }}
组件逻辑中 this.$store.state.xxx
JS模块中 store.state.xxx 5.代码实现
5.1模板中使用
组件中可以使用 $store 获取到vuex中的store对象实例可通过state属性属性获取count 如下
h1state的数据 - {{ $store.state.count }}/h1
5.2组件逻辑中使用
将state属性定义在计算属性中 State | Vuex
h1state的数据 - {{ count }}/h1
// 把state中数据定义在组件内的计算属性中computed: {count () {return this.$store.state.count}}
5.3 js文件中使用
//main.js
import store from /store
console.log(store.state.count)
每次都像这样一个个的提供计算属性, 太麻烦了,我们有没有简单的语法帮我们获取state中的值呢
通过辅助函数 - mapState获取 state中的数据 mapState是辅助函数帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便的用法 用法 1.第一步导入mapState (mapState是vuex中的一个函数)
import { mapState } from vuex
2.第二步采用数组形式引入state属性
mapState([count]) 上面代码的最终得到的是 类似于 count () {return this.$store.state.count
}
3.第三步利用展开运算符将导出的状态映射给计算属性 computed: {...mapState([count])}div state的数据{{ count }}/div
开启严格模式及Vuex的单项数据流
1.目标
明确 vuex 同样遵循单向数据流组件中不能直接修改仓库的数据
2.直接在组件中修改Vuex中state的值
Son1.vue
button clickhandleAdd值 1/buttonmethods:{handleAdd (n) {// 错误代码(vue默认不会监测监测需要成本)this.$store.state.count// console.log(this.$store.state.count) },
} 3.开启严格模式
通过 strict: true 可以开启严格模式,开启严格模式后直接修改state中的值会报错 state数据的修改只能通过mutations并且mutations必须是同步的 四、核心概念-mutations
1.定义mutations
const store new Vuex.Store({state: {count: 0},// 定义mutationsmutations: {}
})
2.格式说明
mutations是一个对象对象中存放修改state的方法
mutations: {// 方法里参数 第一个参数是当前store的state属性// payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷addCount (state) {state.count 1}},
3.组件中提交 mutations
this.$store.commit(addCount) 4.总结
通过mutations修改state的步骤
1.定义 mutations 对象对象中存放修改 state 的方法
2.组件中提交调用 mutations(通过$store.commit(mutations的方法名))
带参数的 mutations 看下面这个案例每次点击不同的按钮加的值都不同每次都要定义不同的mutations处理吗
提交 mutation 是可以传递参数的 this.$store.commit(xxx, 参数)
2.1 提供mutation函数带参数
mutations: {...addCount (state, count) {state.count count}
},
2.2 提交mutation
2.2 提交mutation
handle ( ) {this.$store.commit(addCount, 10)
}
小tips: 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象
this.$store.commit(addCount, {count: 10
}) Vuex中的值和组件中的input双向绑定 实现步骤 代码实现
App.vue
input :valuecount inputhandleInput typetextexport default {methods: {handleInput (e) {// 1. 实时获取输入框的值const num e.target.value// 2. 提交mutation调用mutation函数this.$store.commit(changeCount, num)}}
}
store/index.js
mutations: { changeCount (state, newCount) {state.count newCount}
}, 五、辅助函数- mapMutations mapMutations和mapState很像它把位于mutations中的方法提取了出来我们可以将它导入 import { mapMutations } from vuex
methods: {...mapMutations([addCount])
} 上面代码的含义是将mutations的方法导入了methods中等价于 methods: {// commit(方法名, 载荷参数)addCount () {this.$store.commit(addCount)}}
此时就可以直接通过this.addCount调用了
button clickaddCount值1/button
但是请注意 Vuex中mutations中要求不能写异步代码如果有异步的ajax请求应该放置在actions中 六、核心概念 - actions
state是存放数据的mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化)
actions则负责进行异步操作 ❤️❤️❤️小郑是普通学生水平如有纰漏欢迎各位大佬评论批评指正 如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢!
