Question

我正在尝试访问vuex状态，但是它返回 null 。

这是 resize.js ：

import Vue from 'vue'
import store from '../store'

console.log(store.getters.getBrowserSize.width)

我导入了这是main.js文件

这是 store.js ：

export default new Vuex.Store({
    state: {
        browser: {
            width: null,
            height: null,
            breakPoint: ''
        }
    },
    mutations: {
        setBrowserSize(state, payload) {
            [state.browser.width, state.browser.height, state.browser.breakPoint] = [payload.width, payload.height, payload.breakPoint];
        }
    },
    actions: {},
    getters: {
        getBrowserSize(state) {
            return state.browser;
        }
    }
})

store.js中的所有内容都可以正常运行（我在vue-dev-tools中检查了主题）

这是 App.vue ：在这里，我得到了浏览器的宽度和高度，并且将状态设置为状态。

data() {
            return {
                browser: {
                    width: null,
                    height: null,
                    breakPoint: ''
                }
            }
        },
        methods: {
            currentBreakPoint() {
                let width = window.innerWidth;
                if (width >= process.env.SIZE_XL[1]) {
                    this.browser.breakPoint = process.env.SIZE_XL[0];
                } else if (width <= process.env.SIZE_XL[1] && width >= process.env.SIZE_LG[1]) {
                    this.browser.breakPoint = process.env.SIZE_LG[0]
                } else if (width <= process.env.SIZE_LG[1] && width >= process.env.SIZE_MD[1]) {
                    this.browser.breakPoint = process.env.SIZE_MD[0]
                } else if (width <= process.env.SIZE_SM[1]) {
                    this.browser.breakPoint = process.env.SIZE_SM[0]
                }
            },
            browserSize(width, height) {
                [this.browser.width, this.browser.height] = [width, height];
                this.$store.commit("setBrowserSize", this.browser);
            }
        },
        mounted() {
            this.currentBreakPoint();
            this.browserSize(window.innerWidth, window.innerHeight);
            window.addEventListener("resize", () => {
                this.currentBreakPoint();
                this.browserSize(window.innerWidth, window.innerHeight);
            });
        },

对于.env，我安装了插件，并且在 vue.config.js 中使用了env变量，并且一切正常。

我认为整个问题是由于我想在js文件（而不是vue组件）中获取状态值引起的。

这有什么问题？

vue.config.js 用于环境：

module.exports = {
    pluginOptions:{
        env: {
            SIZE_XL: ['xl', 1280],
            SIZE_LG: ['lg', 1024],
            SIZE_MD: ['md', 768],
            SIZE_SM: ['sm', 640]
        }
    }
}

如何在js文件中访问$ store状态

0 个答案: