当我们在使用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() 调用 方法了。