使用vue做的商城网站,化工课设代做网站,网络管理中心,wordpress文章自动摘要文章目录 版权声明Vuex 概述Vuex 的主要概念和组件 vuex的使用状态 #xff08;state#xff09;Vuex特点 访问vuex中数据$store访问mapState辅助函数访问 开启严格模式及Vuex的单项数据流突变#xff08;mutations#xff09;mutations初识带参 mutations辅助函数 mapMuta… 文章目录 版权声明Vuex 概述Vuex 的主要概念和组件 vuex的使用状态 stateVuex特点 访问vuex中数据$store访问mapState辅助函数访问 开启严格模式及Vuex的单项数据流突变mutationsmutations初识带参 mutations辅助函数 mapMutations 动作Actions辅助函数 mapActions vuex mutations VS actions获取器Getters总结 版权声明
本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明所有版权属于黑马程序员或相关权利人所有。本博客的目的仅为个人学习和交流之用并非商业用途。我在整理学习笔记的过程中尽力确保准确性但无法保证内容的完整性和时效性。本博客的内容可能会随着时间的推移而过时或需要更新。若您是黑马程序员或相关权利人如有任何侵犯版权的地方请您及时联系我我将立即予以删除或进行必要的修改。对于其他读者请在阅读本博客内容时保持遵守相关法律法规和道德准则谨慎参考并自行承担因此产生的风险和责任。本博客中的部分观点和意见仅代表我个人不代表黑马程序员的立场。
Vuex 概述
uex 是一个用于 Vue.js 的状态管理库【状态就是数据】。简言之Vuex 是一个插件可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。使用场景 优势 共同维护一份数据数据集中化管理响应式变化操作简洁
Vuex 的主要概念和组件 状态StateVuex 中的状态是存储应用程序数据的地方通常表示为 JavaScript 对象。 获取器Getters获取器用于根据当前状态计算派生状态类似于存储库中的计算属性。 突变Mutations突变是修改状态的唯一方式。它们是同步的通过明确定义状态如何改变有助于维护可预测的状态。 动作Actions动作用于执行异步操作和触发突变。适合进行诸如发出 API 请求然后根据结果提交突变等任务。 模块ModulesVuex 允许将存储划分为模块。这对于较大的应用程序有助于将状态、突变、动作和获取器组织成更小、更可管理的部分。 Vuex 特别适用于较大的应用程序其中状态管理可能变得复杂。 它强制执行单向数据流并使更容易跟踪应用程序状态变化的来源。这种可预测性有助于调试和维护不断增长的应用程序。
vuex的使用
Vue.js 应用程序中设置 Vuex 的一般步骤 安装Installation你需要将 Vuex 安装为依赖项可以使用 npm 或 yarn 进行安装。 npm i vuex3 # vue2适用存储配置Store Configuration通过定义状态、突变、动作和获取器来创建一个存储。 为了维护项目目录的整洁在src目录下新建一个store目录其下放置一个index.js文件。 // store.jsimport Vue from vueimport Vuex from vuexVue.use(Vuex)const store new Vuex.Store({state: {// 在这里定义应用程序的状态},mutations: {// 在这里定义突变函数},actions: {// 在这里定义动作函数},getters: {// 在这里定义获取器函数}})export default store在 main.js 中导入挂载到 Vue 实例上 import Vue from vue
import App from ./App.vue
import store from ./storeVue.config.productionTip falsenew Vue({render: h h(App),store
}).$mount(#app)测试打印Vuex created(){console.log(this.$store)
}状态 state
“state”状态是指应用程序中的数据的集合通常表示为一个包含各种属性的 JavaScript 对象。这些属性可以包括应用程序的配置、用户信息、页面内容、各种设置等。State提供唯一的公共数据源所有共享的数据都要统一放到Store中的State中存储。store 对象的 state 属性中定义应用程序的状态
const store new Vuex.Store({// state 状态, 即数据, 类似于vue组件中的data,// 区别// 1.data 是组件自己的数据, // 2.state 中的数据整个vue项目的组件都能访问到state: {user: null,settings: {theme: light,language: en,},// 其他应用程序状态},// 其他配置项
})Vuex特点
Vuex 中状态的一些重要特点 Centralized: Vuex 中的状态是集中管理的这意味着所有组件都可以访问相同的状态数据而不需要通过复杂的组件传递数据来实现共享。 Reactive: Vuex 的状态是响应式的。当状态发生变化时依赖于该状态的组件会自动更新以反映这些变化。 Read-Only: Vuex 的状态是只读的。这意味着你不能直接在组件中修改状态而是需要通过 mutations 来进行修改。这有助于维护状态的可预测性。 Single Source of Truth: Vuex 鼓励将应用程序的状态集中到一个单一的状态树中使其成为整个应用程序的“唯一数据源”。这有助于简化状态的管理和维护。 Predictable: 由于状态的修改只能通过 mutations 来进行因此状态的变化变得可预测易于调试和维护。
访问vuex中数据
通过$store直接访问 — {{ $store.state.count }}通过辅助函数mapState 映射计算属性 — {{ count }}
$store访问
通过$store访问的语法获取 store1.Vue模板中获取 this.$store2.js文件中获取 import 导入 store模板中 {{ $store.state.xxx }}
组件逻辑中 this.$store.state.xxx
JS模块中 store.state.xxx模板中使用 在组件中访问 Vuex 中的状态可以使用 this.$store.state 来获取状态的值
templatedivpUser: {{ $store.state.user }}/ppTheme: {{ $store.state.settings.theme }}/p/div
/template组件逻辑中使用 将state属性定义在计算属性中 h1state的数据 - {{ count }}/h1// 把state中数据定义在组件内的计算属性中computed: {count () {return this.$store.state.count}}js文件中使用
//main.jsimport store from /storeconsole.log(store.state.count)mapState辅助函数访问
mapState是辅助函数把store中的数据映射到 组件的计算属性中, 它属于一种方便的用法。 第一步导入mapState (mapState是vuex中的一个函数)import { mapState } from vuex第二步采用数组形式引入state属性mapState([count]) 上面的代码等价于 count () {return this.$store.state.count
}第三步利用展开运算符将导出的状态映射给计算属性 computed: {...mapState([count])}div state的数据{{ count }}/div开启严格模式及Vuex的单项数据流
vuex 同样遵循单向数据流组件中不能直接修改仓库的数据
直接在组件中修改Vuex中state的值
Son1.vue
button clickhandleAdd值 1/buttonmethods:{handleAdd (n) {// 错误代码(vue默认不会监测监测需要成本)this.$store.state.count// console.log(this.$store.state.count) },
}开启严格模式 通过 strict: true 可以开启严格模式,开启严格模式后直接修改state中的值会报错state数据的修改只能通过mutations并且mutations必须是同步的
突变mutations
mutations初识
定义mutations
const store new Vuex.Store({state: {count: 0},// 定义mutationsmutations: {}
})格式说明
mutations是一个对象对象中存放修改state的方法
mutations: {// 方法里参数 第一个参数是当前store的state属性// payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷addCount (state) {state.count 1}}组件中提交 mutations
this.$store.commit(addCount)带参 mutations
提交 mutation 是可以传递参数的 this.$store.commit(xxx, 参数)
提供mutation函数带参数mutations: {...addCount (state, count) {state.count count}
}提交mutationhandle ( ) {this.$store.commit(addCount, 10)
}小tips: 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象this.$store.commit(addCount, {count: 10
})辅助函数 mapMutations
mapMutations 和 mapState很像它是把位于mutations中的方法提取了出来映射到组件methods中。import { mapMutations } from vuex
methods: {...mapMutations([addCount])
}
//等价于
methods: {// commit(方法名, 载荷参数)addCount () {this.$store.commit(addCount)}
}在组件中可以直接通过this.addCount调用 button clickaddCount值1/button请注意 Vuex中mutations中要求不能写异步代码如果有异步的ajax请求应该放置在actions中
动作Actions actions是用于处理异步操作的例如从服务器获取数据或执行复杂的计算。Actions可以包含任何异步操作但是它们最终需要调用mutations来更新state中的数据。 Actions是通过dispatch方法来调用的dispatch方法接收一个action的名称和一个可选的payload参数。当调用dispatch方法时它会触发一个action并且可以在action中执行任何异步操作。
定义actions
mutations: {changeCount (state, newCount) {state.count newCount}
}actions: {setAsyncCount (context, num) {// 一秒后, 给一个数, 去修改 numsetTimeout(() {context.commit(changeCount, num)}, 1000)}
}组件中通过dispatch调用
setAsyncCount () {this.$store.dispatch(setAsyncCount, 666)
}辅助函数 mapActions
mapActions 是把位于 actions中的方法提取了出来映射到组件methods中Son.vueimport { mapActions } from vuex
methods: {...mapActions([changeCountAction])
}//mapActions映射的代码 本质上是以下代码的写法
//methods: {
// changeCountAction (n) {
// this.$store.dispatch(changeCountAction, n)
// },
//}直接通过 this.方法 就可以调用button clickchangeCountAction(200)异步/buttonvuex mutations VS actions
MutationsActions目的修改state中的数据执行异步操作、调用多个mutations同步/异步同步操作可以是同步或异步操作使用场景更新state中的数据执行异步请求、处理复杂逻辑调用方式使用commit方法调用使用dispatch方法调用响应不能返回任何值只能修改state可以返回Promise或异步操作的结果跟踪可以在devtools中跟踪mutations的调用可以在devtools中跟踪actions的调用
总体来说 mutations适用于同步操作用于修改state中的数据。它们是可追踪的可以在devtools中查看它们的调用。actions适用于执行异步操作、调用多个mutations或处理复杂逻辑。它们可以是同步或异步操作并且可以返回Promise或异步操作的结果。在调用上mutations使用commit方法而actions使用dispatch方法。
获取器Getters
getters用于从store中获取数据类似于计算属性可以基于store中的state计算出一个新的值。getters可以看作是store的计算属性它们的值会被缓存起来只有当所依赖的state发生变化时才会重新计算。好处可以将数据的处理逻辑从组件中抽离出来将其放在store中从而使得组件更加简洁和易于维护。另外getters还可以在多个组件中共享和重复使用避免了代码的冗余。 getter示例 定义doneTodos的getter它基于store中的todos数组计算出一个新的数组该数组包含所有已完成的todo对象 const getters {//getters: {// getters函数的第一个参数是 state// 必须要有返回值doneTodos: state {return state.todos.filter(todo todo.done)}
}访问getters 使用store访问getters {{ $store.getters.doneTodos}}在组件中使用这个getter使用mapGetters辅助函数
import { mapGetters } from vuexexport default {computed: {...mapGetters([doneTodos])}
}总结
关于Vuex中state、getters、mutations和actions的使用总结
StateGettersMutationsActions用途存储应用程序的数据从state中派生出计算属性修改state中的数据执行异步操作、调用多个mutations直接访问使用this.$store.state使用this.$store.getters不直接访问通过commit方法调用不直接访问通过dispatch方法调用用法示例this.$store.state.countthis.$store.getters.doneTodosthis.$store.commit(‘increment’)this.$store.dispatch(‘fetchData’)参数无接收state作为参数接收state和payload作为参数接收context对象作为参数返回值无返回基于state的计算属性或派生数据无返回值只能修改state可以返回Promise或异步操作的结果异步操作不适用不适用不适用适用跟踪无可以在devtools中跟踪getters的调用可以在devtools中跟踪mutations的调用可以在devtools中跟踪actions的调用
