计算机系统应用教程网站

网站首页 > 技术文章 正文

vuex之module小例

btikc 2024-09-22 01:13:27 技术文章 22 ℃ 0 评论

说到前面, 状态管理(vuex)遇到的问题

  1. 大家在使用单一状态管理的时候,项目越大的情况下,所有状态集中到一个对象上,会显得比较臃肿。
  2. 团队开发的时候,有可能会操作同一个文件,容易冲突

解决: 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>

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表