vuex的五个属性及使用方法示例 悠悠 2024-03-26 18:28 22阅读 0赞 #### 一,Vuex简介 #### Vuex是Vue.js的状态管理库,它通过中心化的状态管理使得组件间的数据共享更加容易。 Vuex包含五个核心属性:state、getters、mutations、actions和modules。 Vuex是Vue.js的状态管理库,它提供了一种集中式存储管理应用程序中所有组件的状态,并将其分离到一个可预测的状态容器中。Vuex包括五个核心属性: #### 二,Vuex五个核心属性 #### ##### 1:state ##### state:定义了应用程序的状态,就是我们要管理的数据。 存放应用程序的状态(数据),所有组件共享。它是Vue实例的data属性的替代品,但是通过它存储和管理的状态,可以在整个应用程序中实现全局共享,即不同的组件可以通过定义的getter和setter访问同一状态数据。 const store = new Vuex.Store({ state: { count: 0 } }) ##### 2:getters ##### getters:用于获取State中的状态,主要用于对state进行逻辑上的组合和应用,类似于Vue组件中的计算属性。 const store = new Vuex.Store({ state: { count: 0 }, getters: { doubleCount(state) { return state.count * 2 } } }) ##### 3:mutations ##### mutations:用于修改state中的数据,是唯一可以修改state的地方。mutations接收state作为第一个参数,接收payload作为第二个参数。 用于修改State中的状态,只能同步执行。Mutation必须是同步函数,因为它们不能处理异步行为,异步行为应该放在Action中处理。 const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ }, add(state, payload) { state.count += payload } } }) ##### 4:actions ##### actions:用于异步操作和提交mutations,在actions中可以进行任何异步操作,最后再提交到mutations中同步修改state。actions接收context作为第一个参数,其中包含了state、getters和commit等属性。 可以包含任意异步操作(例如从服务器获取数据),可以用Mutation通过提交(commit)来修改State。 const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }, actions: { incrementAsync(context) { setTimeout(() => { context.commit('increment') }, 1000) } } }) ##### 5:modules ##### modules:用于将store分割成模块,每个模块都拥有自己的state、mutation、action、getters和子模块,以便提高应用程序的可维护性。 将State、Getter、Mutation、Action模块化,便于组件化和模块化开发。 const store = new Vuex.Store({ modules: { cart: { state: { items: [] }, mutations: { addItem(state, item) { state.items.push(item) } }, actions: { addAsyncItem(context, item) { setTimeout(() => { context.commit('addItem', item) }, 1000) } } } } }) 使用方法示例: const store = new Vuex.Store({ modules: { cart: { state: { items: [] }, mutations: { pushProductToCart (state, payload) { state.items.push({ id: payload.id, quantity: 1 }) } }, actions: { addProductToCart ({ state, commit }, product) { const cartItem = state.items.find(item => item.id === product.id) if (!cartItem) { commit('pushProductToCart', product) } } }, getters: { cartItems: state => { return state.items } } } } }) 这个代码创建了一个包含cart模块的Vuex store对象,其中cart模块包含state、mutations、actions和getters四个属性,用于管理购物车数据。在addProductToCart action中,使用state.items和commit方法来修改cart模块中的数据。在cartItems getter中,使用state.items来计算购物车中的商品数量和总价。 #### 三,Vuex使用方法 #### 使用方法: ##### 1:安装Vuex:npm install vuex --save ##### ##### 2:在main.js中,导入Vuex,并使用Vue.use()方法注册Vuex。 ##### import Vue from 'vue' import Vuex from 'vuex' import App from './App.vue' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } } }) new Vue({ store, render: h => h(App) }).$mount('#app') ##### 3:在组件中使用vuex中的数据和方法。 ##### <template> <div> <p>Count: { { count }}</p> <button @click="increment">Increment</button> </div> </template> <script> export default { computed: { count() { return this.$store.state.count } }, methods: { increment() { this.$store.commit('increment') } } } </script> ##### 4:vuex综合案例 ##### 下面是一个简单的Vuex使用方法的示例: // 引入Vue和Vuex import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 创建一个Store const store = new Vuex.Store({ // 定义State state: { count: 0 }, // 定义Mutation mutations: { increment: state => state.count++, decrement: state => state.count-- }, // 定义Getter getters: { evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd' }, // 定义Action actions: { incrementIfOdd ({ commit, state }) { if ((state.count + 1) % 2 === 0) { commit('increment') } } } }) new Vue({ el: '#app', store, template: ` <div> <p>Count: { { count }}</p> <p>Even or Odd? { { evenOrOdd }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> <button @click="incrementIfOdd">IncrementIfOdd</button> </div> `, computed: { count () { return this.$store.state.count }, evenOrOdd () { return this.$store.getters.evenOrOdd } }, methods: { increment () { this.$store.commit('increment') }, decrement () { this.$store.commit('decrement') }, incrementIfOdd () { this.$store.dispatch('incrementIfOdd') } } }) 这个代码创建了一个Vuex Store,并定义了State、Mutation、Getter、Action。然后将Store实例与Vue实例关联。在Vue组件中,使用计算属性(computed)和方法(methods)来访问State、Getter和Action。在方法中,使用commit来提交Mutation,使用dispatch来分发Action。
相关 vuex使用及总结 uex小结 import Vuex from 'vuex' Vue.use(Vuex) var store = new Vuex.St... 系统管理员/ 2024年04月17日 06:01/ 0 赞/ 33 阅读
相关 vuex的五个属性及使用方法示例 一,Vuex简介 Vuex是Vue.js的状态管理库,它通过中心化的状态管理使得组件间的数据共享更加容易。 Vuex包含五个核心属性:state、getters、mu 悠悠/ 2024年03月26日 18:28/ 0 赞/ 23 阅读
相关 Vuex的五个核心属性及辅助函数 vuex是什么? vuex是一个专门为vue.js应用程序开发的状态管理模式,它采用了集中式存储和管理程序所有组件的状态 主要包括几个模块 state 存储所有的变 r囧r小猫/ 2023年01月05日 12:54/ 0 赞/ 98 阅读
相关 基于vue+ts的vuex五个属性基础用法 什么是Vuex > VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(可以理解为 vue 组件里的某些 data ) 梦里梦外;/ 2023年01月05日 09:49/ 0 赞/ 101 阅读
相关 vuex的使用方法 npm install vuex -s 在src下创建store,文件夹下创建index.js import Vue from 'vue'; import 快来打我*/ 2022年11月05日 08:33/ 0 赞/ 100 阅读
相关 JavaScript类属性及方法使用 function Person() \{ this.name=" 张三 "; // 定义一个属性 name this.sex=" 男 "; // 定义一个属性 s ﹏ヽ暗。殇╰゛Y/ 2022年06月17日 02:28/ 0 赞/ 163 阅读
相关 vuex的使用方法 一、vuex的安装: 1、运行命令:npm install vuex --save 我Visual Studio Code装了淘宝镜像:用cnpm i vuex --s 「爱情、让人受尽委屈。」/ 2021年10月01日 04:28/ 0 赞/ 360 阅读
相关 Vuex的使用方法mutation和action及getter的基本使用 mutations 在vue 中,只有mutation 才能改变state. mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mut 客官°小女子只卖身不卖艺/ 2021年09月19日 16:34/ 0 赞/ 361 阅读
相关 vuex五个核心属性的理解 Vuex的五个核心概念 本文参考自[Vue文档][Vue],说的非常详细,建议看文档。 Vuex是什么? VueX 是一个专门为 Vue.js 应用设 男娘i/ 2021年08月27日 23:59/ 0 赞/ 396 阅读
还没有评论,来说两句吧...