项目如果非常大,将项目中所有的公共变量放到vuex里,可想而知,太大了,这时候你就可以考虑如果某些变量只有我这个模块用到了,其他地方用不到,这时候就不需要存全局的vuex了,可以在自己模块内部定义vuex,实现存取,以下就是实现方法,当然有很多中办法,以上就说两种常用的方法:
「 第一种实现方法 」
1、首先保证有vue的环境,其次vuex已安装
2、组件内部导入
import vuex from 'vuex'; import myvuex from './store.js'; const {mapMutations,mapState} = vuex.createNamespacedHelpers('scoreEntry')
3、在mounted里面注册,scoreEntry名称需与第二步创建的命名空间对应
mounted() { this.$store.registerModule("scoreEntry", myvuex); },
4、在computed里面引入store.js里面的属性
computed: { ...mapState(["tercherData"]), },
5、在methods里面调用store.js里面的方法
methods: { ...mapMutations(["scoreEntrySeeId"]), }
store.js文件内容
export default { namespaced: true, state:{ tercherData:{ modifyRecordId:'', //修改记录id taskId:'', //成绩录入任务列表(学期级别)dataList中对象返回的id } }, getters:{ }, mutations: { teacherSetTermId(state,payload){ state.tercherData.modifyRecordId = payload.data; }, scoreEntrySeeId(state,payload){ state.tercherData.taskId = payload.data; }, } }
「 第二种实现方法 」
通过Vuex.Store中的modules来分模块引用
第一步新建单独的store模块,module->searchValueStore.js
模块内容与正常的store.js中的内容一样
第二步:在store中引入,通过es6 import 然后通过modules:{ //名称 } 就可以实现注入当前store
调用方法与正常的调用actions和mutations一模一样
交流
我是老礼,公众号「进军全栈攻城狮」作者 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!