织梦网站如何做二级导航,免费wordpress 主题下载,自己做的网站只能用谷歌浏览器打开,网站遮罩是什么目录 1_应用状态管理1.1_状态管理1.2_复杂的状态管理1.3_Vuex的状态管理 2_Vuex的基本使用2.1_安装2.2_创建Store2.3_组件中使用store 3_核心概念State3.1_单一状态树3.2_组件获取状态3.3_在setup中使用mapState 4_核心概念Getters4.1_getters的基本使用4.2_getters第二个参数4… 目录 1_应用状态管理1.1_状态管理1.2_复杂的状态管理1.3_Vuex的状态管理 2_Vuex的基本使用2.1_安装2.2_创建Store2.3_组件中使用store 3_核心概念State3.1_单一状态树3.2_组件获取状态3.3_在setup中使用mapState 4_核心概念Getters4.1_getters的基本使用4.2_getters第二个参数4.3_getters的返回函数4.4_mapGetters的辅助函数 5_核心概念Mutations5.1_使用5.2_Mutation常量类型5.3_mutation重要原则 6_核心概念Actions6.1_基本使用6.2_分发操作6.3_actions的异步操作 7_核心概念Modules7.1_module的基本使用7.2_module的局部状态7.3_module的命名空间7.4_module修改或派发根组件 1_应用状态管理
1.1_状态管理
在开发中应用程序需要处理各种各样的数据这些数据需要保存在应用程序中的某一个位置对于这些数据的管理就称之为是 状态管理。
在前面是如何管理自己的状态呢
在Vue开发中使用组件化的开发方式而在组件中定义data或者在setup中返回使用的数据这些数据称之为state在模块template中可以使用这些数据模块最终会被渲染成DOM称之为View在模块中会产生一些行为事件处理这些行为事件时有可能会修改state这些行为事件称之为actions 1.2_复杂的状态管理
JavaScript开发的应用程序已经变得越来越复杂了
JavaScript需要管理的状态越来越多越来越复杂这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等也包括一些UI的状态比如某些元素是否被选中是否显示加载动效当前分页
当的应用遇到多个组件共享状态时单向数据流的简洁性很容易被破坏
多个视图依赖于同一状态来自不同视图的行为需要变更同一状态
是否可以通过组件数据的传递来完成呢
对于一些简单的状态确实可以通过props的传递或者Provide的方式来共享状态但是对于复杂的状态管理来说显然单纯通过传递和共享的方式是不足以解决问题的比如兄弟组件如何共享数据呢 1.3_Vuex的状态管理
管理不断变化的state本身是非常困难的
状态之间相互会存在依赖一个状态的变化会引起另一个状态的变化View页面也有可能会引起状态的变化当应用程序复杂时state在什么时候因为什么原因而发生了变化发生了怎么样的变化会变得非常难以控制和追踪
因此是否可以考虑将组件的内部状态抽离出来以一个全局单例的方式来管理呢
在这种模式下组件树构成了一个巨大的 “试图View”不管在树的哪个位置任何组件都能获取状态或者触发行为通过定义和隔离状态管理中的各个概念并通过强制性的规则来维护视图和状态间的独立性的代码边会变得更加结构化和易于维护、跟踪
这就是Vuex背后的基本思想它借鉴了Flux、Redux、Elm纯函数语言redux有借鉴它的思想 Vue官方也在推荐使用Pinia进行状态管理后续学习 参考官网的图 2_Vuex的基本使用
2.1_安装 npm install 2.2_创建Store
每一个Vuex应用的核心就是store仓库 store本质上是一个容器它包含着应用中大部分的状态state
Vuex和单纯的全局对象有什么区别 第一Vuex的状态存储是响应式的。 当Vue组件从store中读取状态的时候若store中的状态发生变化那么相应的组件也会被更新 第二不能直接改变store中的状态。 改变store中的状态的唯一途径就显示提交 (commit) mutation这样使得可以方便的跟踪每一个状态的变化从而让能够通过一些工具帮助更好的管理应用的状态
demo
1在src文件夹下建立一个新文件夹store在该文件夹下一般创建index.js文件也可根据实际开发创建。
src/store/index.js
import { createStore } from vuexconst store createStore({state: () ({counter: 100})
}) 2在main.js注册
import { createApp } from vue
import App from ./App.vue
import store from ./storecreateApp(App).use(store).mount(#app)3在App.vue中调用
templatediv classapp!-- store中的counter --h2App当前计数: {{ $store.state.counter }}/h2/div
/template2.3_组件中使用store
在组件中使用store按照如下的方式
在模板tempte中使用比如2.2的demo在options api中使用比如computed在setup中使用
templatediv classapp!-- 在模板tempte中使用store --h2Home当前计数: {{ $store.state.counter }}/h2h2Computed当前计数: {{ storeCounter }}/h2h2Setup当前计数: {{ counter }}/h2button clickincrement1/button/div
/templatescriptexport default {//在options api中使用比如computedcomputed: {storeCounter() {return this.$store.state.counter}}}
/script!-- 在setup中使用store --
script setupimport { toRefs } from vueimport { useStore } from vuexconst store useStore()const { counter } toRefs(store.state)function increment() {store.commit(increment)}
/script3_核心概念State
3.1_单一状态树
Vuex 使用单一状态树
用一个对象就包含了全部的应用层级的状态采用的是SSOTSingle Source of Truth也可以翻译成单一数据源
这也意味着每个应用将仅仅包含一个 store 实例 单状态树和模块化并不冲突后面会涉及到module的概念
单一状态树的优势
如果状态信息是保存到多个Store对象中的那么之后的管理和维护等等都会变得特别困难所以Vuex也使用了单一状态树来管理应用层级的全部状态单一状态树能够让最直接的方式找到某个状态的片段而且在之后的维护和调试过程中也可以非常方便的管理和维护 3.2_组件获取状态
在前面的demo已知如何在组件中获取状态了。
当然如果觉得那种方式有点繁琐表达式过长可以使用计算属性 computed: {storeCounter() {return this.$store.state.counter}}但是如果有很多个状态都需要获取话可以使用mapState的辅助函数
mapState的方式一对象类型mapState的方式二数组类型也可以使用展开运算符和来原有的computed混合在一起 3.3_在setup中使用mapState
在setup中如果单个获取状态是非常简单的 通过useStore拿到store后去获取某个状态即可。
但是如果使用 mapState 如何获取状态
1 默认情况下Vuex并没有提供非常方便的使用mapState的方式下面这种方式不建议使用
templatediv classapp!-- 在模板中直接使用多个状态 --h2name: {{ $store.state.name }}/h2h2level: {{ $store.state.level }}/h2h2avatar: {{ $store.state.avatarURL }}/h2/div
/templatescript setupimport { computed } from vueimport { mapState, useStore } from vuex// 一步步完成,步骤繁琐const { name, level } mapState([name, level])const store useStore()const cName computed(name.bind({ $store: store }))const cLevel computed(level.bind({ $store: store }))
/script2这里进行了一个函数的封装简化步骤
src/hooks/useState.js
import { computed } from vue
import { useStore, mapState } from vuexexport default function useState(mapper) {const store useStore()const stateFnsObj mapState(mapper)const newState {}Object.keys(stateFnsObj).forEach(key {newState[key] computed(stateFnsObj[key].bind({ $store: store }))})return newState
}使用该函数
templatediv classapp!-- 在模板中直接使用多个状态 --h2name: {{ $store.state.name }}/h2h2level: {{ $store.state.level }}/h2h2avatar: {{ $store.state.avatarURL }}/h2/div
/templatescript setupimport useState from ../hooks/useState// 使用useState封装函数const { name, level } useState([name, level])
/script3更推荐下面的使用方式
templatediv classapp!-- 在模板中直接使用多个状态 --h2name: {{ $store.state.name }}/h2h2level: {{ $store.state.level }}/h2h2avatar: {{ $store.state.avatarURL }}/h2/div
/templatescript setupimport { computed, toRefs } from vueimport { mapState, useStore } from vuex// 3.直接对store.state进行解构(推荐)const store useStore()const { name, level } toRefs(store.state)
/script4_核心概念Getters
4.1_getters的基本使用
某些属性可能需要经过变化后来使用这个时候可以使用getters 4.2_getters第二个参数
getters可以接收第二个参数 getters: {// 2.在该getters属性中, 获取其他的gettersmessage(state, getters) {return name:${state.name} level:${state.level} friendTotalAge:${getters.totalAge}}}4.3_getters的返回函数 getters: {// 3.getters是可以返回一个函数的, 调用这个函数可以传入参数(了解)getFriendById(state) {return function(id) {const friend state.friends.find(item item.id id)return friend}}}4.4_mapGetters的辅助函数
可以使用mapGetters的辅助函数
templatediv classapph2doubleCounter: {{ doubleCounter }}/h2h2friendsTotalAge: {{ totalAge }}/h2!-- 根据id获取某一个朋友的信息 --h2id-111的朋友信息: {{ getFriendById(111) }}/h2h2id-112的朋友信息: {{ getFriendById(112) }}/h2/div
/templatescriptimport { mapGetters } from vuexexport default {computed: {...mapGetters([doubleCounter, totalAge]),...mapGetters([getFriendById])}}
/script也可在setup中使用
templatediv classapph2message: {{ message }}/h2/div
/templatescript setupimport { computed, toRefs } from vue;import { mapGetters, useStore } from vuexconst store useStore()// 1.使用mapGetters 较麻烦// const { message: messageFn } mapGetters([message])// const message computed(messageFn.bind({ $store: store }))// 2.直接解构, 并且包裹成ref// const { message } toRefs(store.getters)// 3.针对某一个getters属性使用computedconst message computed(() store.getters.message)
/script5_核心概念Mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
5.1_使用
在提交mutation的时候会携带一些数据这时可以使用参数注意payload为对象类型
mutation :{add(state,payload){statte.counter payload}
}提交
$store.commit({type: add,count: 100
})5.2_Mutation常量类型
demo
1在mutaition-type.js定义常量
export const CHANGE_INFO changeInfo2在store使用常量 mutations: {[CHANGE_INFO](state, newInfo) {state.level newInfo.levelstate.name newInfo.name}}3在使用的 5.3_mutation重要原则
一条重要的原则就是mutation 必须是同步函数
这是因为devtool工具会记录mutation的日记每一条mutation被记录devtools都需要捕捉到前一状态和后一状态的快照但是在mutation中执行异步操作就无法追踪到数据的变化 6_核心概念Actions
6.1_基本使用
Action类似于mutation不同在于 Action提交的是mutation而不是直接变更状态 Action可以包含任意异步操作
有一个非常重要的参数context
context是一个和store实例均有相同方法和属性的context对象所以可以从其中获取到commit方法来提交一个mutation或者通过 context.state 和 context.getters 来获取 state 和getters
具体案例参考这篇文章 https://blog.csdn.net/qq_21980517/article/details/103398686 6.2_分发操作 6.3_actions的异步操作
Action 通常是异步的可以通过让action返回Promise知道 action 什么时候结束然后在Promise的then中来处理完成后的操作。
demo:
index.js中以发送网络请求为例
action{fetchHomeMultidataAction(context) {// 1.返回Promise, 给Promise设置then// fetch(http://123.207.32.32:8000/home/multidata).then(res {// res.json().then(data {// console.log(data)// })// })// 2.Promise链式调用// fetch(http://123.207.32.32:8000/home/multidata).then(res {// return res.json()// }).then(data {// console.log(data)// })return new Promise(async (resolve, reject) {// 3.await/asyncconst res await fetch(http://123.207.32.32:8000/home/multidata)const data await res.json()// 修改state数据context.commit(changeBanners, data.data.banner.list)context.commit(changeRecommends, data.data.recommend.list)resolve(aaaaa)})}} test3.vue中
script setupimport { useStore } from vuex// 告诉Vuex发起网络请求const store useStore()store.dispatch(fetchHomeMultidataAction).then(res {console.log(home中的then被回调:, res)})/script7_核心概念Modules
7.1_module的基本使用
Module的理解
由于使用单一状态树应用的所有状态会集中到一个比较大的对象当应用变得非常复杂时store 对象就有可能变得相当臃肿为了解决以上问题Vuex 允许将 store 分割成模块module每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块 7.2_module的局部状态
对于模块内部的 mutation 和 getter接收的第一个参数是模块的局部状态对象 7.3_module的命名空间
默认情况下模块内部的action和mutation仍然是注册在全局的命名空间中的
这样使得多个模块能够对同一个 action 或 mutation 作出响应Getter 同样也默认注册在全局命名空间
如果希望模块具有更高的封装度和复用性可以添加 namespaced: true 的方式使其成为带命名空间的模块 当模块被注册后它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名
democounter,js
const counter {namespaced: true, //命令空间state: () ({count: 99}),mutations: {incrementCount(state) {console.log(state)state.count}},getters: {doubleCount(state, getters, rootState) {return state.count rootState.rootCounter}},actions: {incrementCountAction(context) {context.commit(incrementCount)}}
}export default counter7.4_module修改或派发根组件
在action中修改root中的state那么有如下的方式
