vuex 快来打我* 2022-04-12 05:56 281阅读 0赞 vuex在项目中维护一个状态,在项目中的作用是一个唯一的数据源, 相当于全局对象,各个组件共享这一个对象 初始化一个新项目 vue init webpack myvue3 安装vuex npm install vuex --save 现在的项目结构如下 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjM4NTk1_size_16_color_FFFFFF_t_70] 开始在main.js中引入并使用vuex, 在对象store的mutations中定义处理函数 import Vue from 'vue' import App from './App' import router from './router' import vuex from 'vuex' Vue.config.productionTip = false Vue.use(vuex); //实例state对象 const store = new vuex.Store({ //全局状态 state:{ count: 0 }, //定义处理函数 mutations:{ add(state){ this.state.count += 1; }, decrease(state){ this.state.count -= 1; } } }) new Vue({ el: '#app', router, components: { App }, template: '<App/>', store //在vue中使用store }) 修改HelloWorld.vue如下, “$store.commit(‘add’)” 表示触发mutations中函数,处理状态值 <template> <div class="hello"> { {this.$store.state.count}} <button @click="$store.commit('add')">+</button> <button @click="$store.commit('decrease')">-</button> </div> </template> <script> export default { name: 'HelloWorld', data() { return { } } } </script> <style scoped> </style> 打开页面,就可以在组件中动态的更改状态值啦 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjM4NTk1_size_16_color_FFFFFF_t_70 1] 再来修改下HelloWorld.vue, 换成计算属性的写法,每次只需要调用计算属性即可: <template> <div class="hello"> { {count}} <button @click="$store.commit('add')">+</button> <button @click="$store.commit('decrease')">-</button> </div> </template> <script> export default { name: 'HelloWorld', data() { return { } }, computed:{ count(){ return this.$store.state.count; } } } </script> <style scoped> </style> 上面是演示了一个状态count的情况, 若状态过多,就要写多个计算属性也是累赘, 所以vuex提供了一个辅助函数mapState。 再增加一个状态 //实例state对象 const store = new vuex.Store({ //全局状态 state:{ count: 0, name: '张三' }, ...... 使用mapState <template> <div class="hello"> { {count}}{ {name}} <button @click="$store.commit('add')">+</button> <button @click="$store.commit('decrease')">-</button> </div> </template> <script> import { mapState } from 'vuex' export default { name: 'HelloWorld', data() { return { } }, computed: mapState(['count', 'name']) } </script> <style scoped> </style> ## actions ## 通过上面例子大致明白了组件中获取状态值,组件中通过触发mutations定义的函数来处理state值。 接着了解下actions, 在mutations可以对多个state操作,那么actions就可以理解为可以对多个mutations进行操作,如下actions中定义了一个init\_add函数,表示初始化数据和执行一次+1操作 import Vue from 'vue' import App from './App' import router from './router' import vuex from 'vuex' Vue.config.productionTip = false Vue.use(vuex); //实例state对象 const store = new vuex.Store({ //全局状态 state:{ count: 0, name: '张三' }, //改变状态 mutations:{ init(state){ this.state.count = '100'; this.state.name = "王五"; }, add(state){ this.state.count += 1; }, decrease(state){ this.state.count -= 1; } }, actions:{ init_add(state){ state.commit('init'); state.commit('add'); } } }) new Vue({ el: '#app', router, components: { App }, template: '<App/>', store //在vue中使用store }) 组件调用的地方要修改成dispatch,触发actions <button @click="$store.dispatch('init_add')">初始化并增加</button> [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjM4NTk1_size_16_color_FFFFFF_t_70]: /images/20220412/09ee29f848364a0ba0c7891d50cfa5bf.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjM4NTk1_size_16_color_FFFFFF_t_70 1]: /images/20220412/9515d9cc4274407dbcae971fdf88409a.png
相关 Vuex 一、vuex vuex是实现组件状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。 1. 安装vuex npm install Vuex --s 蔚落/ 2022年10月28日 15:29/ 0 赞/ 182 阅读
相关 vuex 原文 https://segment.com/a/119000000501564 原文: [Learn Vuex by Building a Notes App][] ,有删 朱雀/ 2022年05月30日 00:05/ 0 赞/ 268 阅读
相关 vuex 转自:https://segmentfault.com/a/1190000007516967 正文 关于vuex类的新闻最近很多,看到眼热就去查了下资料,然后扯出来 逃离我推掉我的手/ 2022年05月26日 09:42/ 0 赞/ 243 阅读
相关 vuex 转自: https://segmentfault.com/a/1190000009404727 如果你在使用 `vue.js` , 那么我想你可能会对 vue 组件之 以你之姓@/ 2022年05月26日 02:13/ 0 赞/ 244 阅读
相关 Vuex Vuex 是⼀个专为 Vue.js 应⽤程序开发的状态管理模式。它采⽤集中式存储管理应⽤的所有组件的状 态,并以相应的规则保证状态以⼀种可预测的⽅式发⽣变化。 谁践踏了优雅/ 2022年05月14日 04:18/ 0 赞/ 285 阅读
相关 vuex vuex在项目中维护一个状态,在项目中的作用是一个唯一的数据源, 相当于全局对象,各个组件共享这一个对象 初始化一个新项目 vue init webpack myv 快来打我*/ 2022年04月12日 05:56/ 0 赞/ 282 阅读
相关 vuex—1vuex初始 1.vuex是什么 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4 落日映苍穹つ/ 2022年01月21日 03:37/ 0 赞/ 276 阅读
相关 vuex 自己的理解: 一: 第一种 state mutations actions getters 集中式管理 Vuex 是一个专为 Vue.js 应用程序开发 系统管理员/ 2021年08月28日 01:12/ 0 赞/ 474 阅读
相关 vuex > Vuex称为Vue的状态管理工具,也是多组件状态共享的工具 > > Vuex相当于是Vue的一个集中式的存储仓库 > > 它存储的是数据 【 状态 】 > 蔚落/ 2021年07月25日 15:08/ 0 赞/ 501 阅读
相关 Vuex Vuex 1. 什么是vuex Vuex 是一个专为 Vue.js 应用程序开发中管理的一个模式。 通过创建一个集中的数据存储,方便程序中的所有组件进行 青旅半醒/ 2021年07月24日 18:56/ 0 赞/ 649 阅读
还没有评论,来说两句吧...