网站首页 > 技术文章 正文
说到前面, 状态管理(vuex)遇到的问题
- 大家在使用单一状态管理的时候,项目越大的情况下,所有状态集中到一个对象上,会显得比较臃肿。
- 团队开发的时候,有可能会操作同一个文件,容易冲突
解决: Vuex给我们提供了一个 module,直白一点,就是可以把一个大的store,拆分开,模块化开发
代码情况
目录结构,就是普通的通过vue-cli生成出来的,创建一个store文件夹.
store/index.js
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); import demo from './demo' import demo2 from './demo2' export default new Vuex.Store({ modules:{ demo, demo2 } })
store/demo.js store/demo2.js 两个代码可以一样,比较重要的是 namespaced这个字段
const state = { count:10, } const mutations = { increment(state){ state.count++ } } export default { namespaced:true, state, mutations }
namespaced 就是命名空间的意思,之前用过命名空间的同学,应该很容易明白,就是后续的操作需要加上命名空间,比如,之前提交mutations的形式是 this.$store.commit('increment') 现在需要变成 this.$store.commit('命名空间/increment')这种形式,而命名空间就是文件的名字,这里其实就是 this.$store.commit('demo/increment') this.$store.commit('demo2/increment')
这样的操作有何好处?我想大家都应该体会到了吧,团队合作开发便利,并且很好的把大的对象拆分n个。
当然,千万别忘记,在main.js里面需要引入 store/index.js 必须注入到 vue中才可以使用。往下继续看:
main.js
import Vue from 'vue' import App from './App.vue' import store from './store/' Vue.config.productionTip = false new Vue({ store, //这里一定要注入 render: h => h(App), }).$mount('#app')
注入进去后,在我们的 *.vue文件中就可以使用了,比如在 App.vue中使用:
App.vue
<template> <div id="app"> <div> {{$store.state.demo.count}} <br> {{$store.state.demo2.count}} </div> <button @click="handleIncrement">点击增加</button> </div> </template> <script> export default { name: 'app', mounted(){ console.log(this.$store); }, methods:{ handleIncrement(){ this.$store.commit('demo/increment'); this.$store.commit('demo2/increment'); } } } </script>
- 上一篇: Vuex 是一个专为 Vue
- 下一篇: vue-vuex状态管理
猜你喜欢
- 2024-09-22 35《Vue 入门教程》Vue-Cli 项目文件结构分析
- 2024-09-22 vuex基础进阶用法(module模块化)
- 2024-09-22 Vue入门025- 求和案例_vuex版(getters的使用)
- 2024-09-22 Vue实战——vue-cli3创建项目是怎么集成vuex状态管理的?
- 2024-09-22 挑战全网最幽默的Vuex系列教程:第六讲 Vuex的管理员Module实战
- 2024-09-22 万字总结Vue(包含全家桶),希望这一篇可以帮到您(二)
- 2024-09-22 Vue开发库存管理前端页面时一些小经验记录
- 2024-09-22 基于 Vue 技术栈的微前端方案实践
- 2024-09-22 Vue(Axios+VueRouter+Vuex)的入门使用
- 2024-09-22 「Vuex入门」核心概念1.State
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- oraclesql优化 (66)
- 类的加载机制 (75)
- feignclient (62)
- 一致性hash算法 (71)
- dockfile (66)
- 锁机制 (57)
- javaresponse (60)
- 查看hive版本 (59)
- phpworkerman (57)
- spark算子 (58)
- vue双向绑定的原理 (68)
- springbootget请求 (58)
- docker网络三种模式 (67)
- spring控制反转 (71)
- data:image/jpeg (69)
- base64 (69)
- java分页 (64)
- kibanadocker (60)
- qabstracttablemodel (62)
- java生成pdf文件 (69)
- deletelater (62)
- com.aspose.words (58)
- android.mk (62)
- qopengl (73)
- epoch_millis (61)
本文暂时没有评论,来添加一个吧(●'◡'●)