我想在我的应用程序和模板中使用我的Vuexstore 数据.

我的维克斯store :

var Vue = require('vue');
var Vuex = require('vuex');

Vue.use(Vuex)

let store = new Vuex.Store({
        state: {
            user: {},
        },
    }
}
module.exports = store

我想在我的应用程序中使用store 数据,并将其显示在模板中.但是,在设置data属性中的数据时,this.$storeundefined.但是,我可以在beforeRender功能中访问它:

var Vue = require('vue'),
store = require('../../link/to/my/store');

module.exports = {
    el: '#selector',

    store,

    components: {},

    data: {
        saving: false,
        user: this.$store.state.user // this.state is not available here
    },

    created: function(){},
    beforeCreate: function() {

        console.log(this.$state.state) // this.$state is available here

        // i get my data in the form of a json string from the dom
        // and update the global store with the data
        let user = document.querySelector('#user-data')
        if (user) this.$store.dispatch('updateUser', JSON.parse(user.innerHTML))

    },

    methods: {}

    }
};

我也try 过计算(computed)属性,但没有效果.

推荐答案

根据Vue documentation条:

定义组件时,必须将数据声明为返回初始数据对象的函数.

所以,改变:

data: {
    saving: false,
    user: this.$store.state.user
},

为此:

data: function () {
  return {
    saving: false,
    user: this.$store.state.user
  };
}

然后,函数中的this将引用$store.

Vue.js相关问答推荐

Vue 2 如何在全局函数中返回观察者

如何向 添加方法和 v-model?

Vue Datepicker 不会在渲染时显示默认日期

vuejs3 youtube-plugin YT 未定义控制台错误

如何使用 vuejs 在浏览器 url 中获取当前 product.id 的详细信息

aspnet core如何在deploy上构建webpack

运行vue-cli-service build --watch时没有 CSS 文件

如何在map中添加新的标记 onclick?

在 vue 3 中使用 vue-chartjs:createElement 不是函数

在按键 vuejs 中只允许数字和一个小数点后 2 位限制

为什么 vue 文档说 refs 不是响应式的,而实际上它们是响应式的

包含 Vue 组件的 HTML 字符串的 Nuxt 渲染函数

删除一行后刷新 Bootstrap-Vue 表

Vue Cli 3 不允许我在 Webpack 中处理 SVG

中文而不是英文的Element UI分页

如何在 Vue.js 插槽范围内传递方法

vuex - 即使不推荐,是否可以直接更改状态?

在 Vuejs 中全局导入 Axios 方法

隐藏特定标题及其在 vuetify 数据表中的对应列

如何隔离 Vuetify 全局样式