0
点赞
收藏
分享

微信扫一扫

Vuex 结束

洛茄 2022-03-30 阅读 40
vue前端

        实际上在初始vuex和利用vuex批量生成代码时,我们就可以感受到vuex是一个用来共享数据的插件(Vue.use()中的内容我这里同一都把他们当插件)

        vuex是用来集中式存储管理应用的所有组件的状态,他的厉害之处是在于,可以利用vue在浏览器中的插件,时时监测到数据的改变,并留下日志,这样就可以知道数据是何时被改,在哪里被改,而避免了之前共享数据时,任何一个举动改变了数据却无法调试的尴尬

        下面介绍vuex的核心内容中的最后一个模块 modules

        modules

        在我们的store文件夹中,不像之前一样只使用index.js来控制Mutations...等,当我们的业务逻辑复杂起来后,选择采用模块化的方式将不同的模块分成不同的js文件,从而使他们有自己的Mutations...等,更方便的调试和维护代码

        

         所以当我们选择在vuex中添加模块的时候,应该这样,将不同的状态以不同的js文件保存,从而减少代码的复杂度

//引入Vuex
import Vuex from 'vuex'
import countSum from './countSum'
import personMessage from './personMessage'


Vue.use(Vuex)
// 创建store,并暴露store
export default new Vuex.Store({
modules: {
countAbout: countSum,
personAbout: personMessage,
}
})

        命名空间

        在vuex的modules中,文件添加 命名空间 namespaced 使得模块中的代码有更高的复用性,此时他们的getters等函数会自动调整路径,同时使用的时候也要带好路径,此时就是局部函数,其他文件则可以重名,具体使用方法如下

        先给modules的模块化文件添加 namespaced

export default {
namespaced: true,
...
}

        接着在使用的时候,使用哪个文件的哪个函数都需要注明清楚,例如写出一个计算属性

computed: {
personList() {
return this.$store.state.personAbout.personList;
},
getFirstName() {
return this.$store.getters["personAbout/getFirstName"];
},
},

        有时我们可以利用(.)的方式获取想要的属性,如第一行的函数,但有时我们又需要执行指定的函数,则需要参照下面一行的函数写,因为对象有两种取值方法

        其中/前是模块名,/后是需要的函数名

举报

相关推荐

0 条评论