如何正确的改进使用vuex的方式

174 阅读1分钟

当我们在使用vuex时候,可能需要繁琐的

import{mapState,mapMutations,...} from 'vuex' // 引入
export default {
    computed: {  
        ...mapGetters([ 'token' ])  
    }, // 注册事件
    methods: { 
        ...mapMutations([ 'SET_TOKEN' ]) 
    } 
}

这会出现什么问题呢? 当我们项目渐渐变得庞大的时候,就会出现大量的重复工作,而且不利于后期的维护, 这时候我们可以引入mixins去改进我们的写法: 在src目录下新建minxins文件夹,在文件夹中新建index.js, index内容如下

import { mapGetters, mapMutations, mapActions } from "vuex"
export const store_user = { 
    computed: { 
        ...mapGetters([ 'token' ]) 
    },
    methods: { 
        ...mapMutations([ 'SET_TOKEN' ]) 
    } 
}

//在需要混入的组件中把这个mixin引入

import { store_user } from "@/mixins/index.js"
export default{ 
    mixins:[store_user] //注册mixins 
}

这样就可以减少我们大量的重复引入问题。可以愉快的通过 this.xx 访问vuex变量,this.xx() 调用 方法了。