标签: vuex

有没有办法将参数传递给getter vuex store？就像是:

new Vuex.Store({
  getters: {
    someMethod(arg){
       // return data from store with query on args
    }
  }
})

所以我可以使用组件

<template>
    <div>
        <p>{{someMethod(this.id)}}</p>
    </div>
</template>
<script lang="ts">
    import { mapGetters } from "vuex"

    export default {
        props: ['id'],
        computed: mapGetters(['someMethod'])
        }
    }
</script>

但在vuex中,第一个参数是state,第二个是其他参数getters.可能吗？

对于这样的组件

<template>
    <div>
        <router-link :to="{name:'section', params: { sectionId: firstSectionId }}">Start</router-link>
    </div>
</template>

<script lang="ts">
    import { mapActions } from "vuex"

    export default {
        mounted() {
            this.getSectionId()
        },
        computed: {
            firstSectionId() {
                return this.$store.state.firstSectionId
            }
        },
        methods: mapActions(["getSectionId"])
    }
</script>

商店:

const store: any = new Vuex.Store({
    state: {
        firstSectionId: null
    },
    // actions,
    // mutations
})

我在一个Web请求getSectionId的行动,并会以异步方式获取数据并调用的突变,将填补firstSectionId中state.在初始渲染firstSectionId过程中null,我得到的警告是在渲染过程中缺少必需的参数router-link.

这里添加不是问题v-if="firstSectionId".但一般来说,从服务器获取数据的方法是什么？目前我的所有组件都在检查呈现前是否存在数据,是否正常或是否有更好的方法等待数据在呈现之前加载？

我习惯使用全局事件总线来处理跨组件方法.例如:

var bus = new Vue();
...
//Component A
bus.$emit('DoSomethingInComponentB');
...
//Component B
bus.$on('DoSomethingInComponentB', function(){ this.doSomething() })

但是,我正在建设一个需要全球国家管理的大型项目.当然,我想使用Vuex.

虽然这种总线模式适用于Vuex,但似乎是错误的.我已经看到Vuex被推荐作为这种模式的替代品.

有没有办法在Vuex中运行组件中的方法？我该怎么做呢？

有没有一种方法可以让派遣/操作在其中调用吸气剂？

mutations: {
    setData(state, data) {
        state.data = data;
    }
}
actions: {
    sendDataToServer({ commit }, payload) {
        // call getter (data) and assign to variable
        // do async functions from the data returned
    }
},
getters: {
    getAppData: state => () => {
        return state.data;
    }
}

那么，这里的最佳实践是什么？使用变异来更改状态，然后获取状态并将其传递给动作，该动作将执行异步功能，还是我需要重组实现？

呼叫变异->通过getter获取数据->呼叫操作

要么

是否都在动作上做（在动作上做突变，并且不需要吸气剂就做动作/异步方法）？

到目前为止，我找到的有关该主题的唯一信息是这篇文章。

我正在尝试用 2 个模块实现商店。

export interface RootState {
    /** root state props **/
}

const store: StoreOptions<RootState> = {
    modules: {
        foo,
        bar,
    },
};

export default new Vuex.Store<RootState>(store);

然后我有两个模块：

export interface FooState {
    //(...)    
}

export const foo: Module<FooState, RootState> = {
    //(...)
};

export interface BarState {
    //(...)    
}

export const bar: Module<BarState, RootState> = {
    //(...)
};

一切正常，直到我遇到一种情况，我需要一个来自 foo 模块的 getter 来访问 bar 状态：

export const getters: GetterTree<FooState, RootState> = {
    getInfo: (state, {}, rootState) …

获取和异步数据之间的确切区别是什么.官方文档说明如下:

asyncData

您可能希望获取数据并在服务器端呈现它.Nuxt.js添加了一个asyncData方法,允许您在设置组件数据之前处理异步操作.

每次加载组件之前都会调用asyncData(仅适用于页面组件).它可以从服务器端调用,也可以在导航到相应的路由之前调用.此方法接收上下文对象作为第一个参数,您可以使用它来获取某些数据并返回组件数据.

取

fetch方法用于在呈现页面之前填充存储,它类似于asyncData方法,除了它不设置组件数据.每次加载组件之前都会调用fetch方法(如果已设置)(仅适用于页面组件).它可以从服务器端调用,也可以在导航到相应的路由之前调用.

fetch方法接收上下文对象作为第一个参数,我们可以使用它来获取一些数据并填充存储.要使fetch方法异步,返回一个Promise,nuxt.js将等待在呈现组件之前解析promise.

Fetch用于填充商店的数据？但是在asyncData中这也可以通过商店提交吗？我不明白为什么有两种方法.

这两种方法都在初始加载时运行服务器端,之后当您浏览应用程序时,它运行客户端.

有人可以向我解释使用这些方法的优势吗？

感谢帮助.

在我的Vue + Vuex项目中,我正在尝试使用Visual Studio Code进行调试.我使用Chrome调试工具正确启动调试器,并正确使用地图,但当我尝试在.js或.vue文件中放置断点时,VS Code似乎将断点放在错误的位置.例如,在这里我尝试在第40行的一个getter中放置一个断点,但最后会有15行:

这是VS Code中的错误,还是其他一些问题？有关如何修复的任何建议？

其他行上的其他断点具有相同的行为,出现在后面的行上,但我无法检测到模式.它发生在.js和.vue文件中,它发生在Object声明和根级传统函数定义中.

我正在使用VS Code 1.24.0.

我正在使用vuex(2.1.1)并在vue单个文件组件中工作.但是为了避免在我的vue单个文件组件中出现太多错误,我将一些函数移动到utils.js我导入到vue文件中的模块.在这里utils.js我想阅读vuex状态.我怎样才能做到这一点？因为似乎接近getter等状态是假设你是在vue组件内工作,还是没有？

我尝试import state from '../store/modules/myvuexmodule'然后引用state.mystateproperty但它总是给出'undefined',而在vue-devtools中我可以看到state属性确实有正确的值.

我在这一点上的估计是,这根本不是'走的路',因为js文件中的state.property值不会被动,因此不会更新或者其他东西,但也许有人可以确认/证明我错了.

我试图更好地理解Vuex中的"上下文"对象是什么.

所述上下文对象在Vuex文档中提及无数次.例如,在https://vuex.vuejs.org/en/actions.html中,我们有:

操作处理程序接收一个上下文对象,该对象在商店实例上公开同一组方法/属性,因此您可以调用context.commit来提交变异...

我理解如何使用它,并且我们可以使用解构,如果我们只想使用来自上下文对象的"提交",但希望更深入一点,这样我就能更好地理解发生了什么.

首先,我在"上下文对象"上发现了一对~8.5岁的帖子作为模式: 什么是上下文对象设计模式？并且 你能解释一下背景下设计模式？

但是,特别是Vuex,我希望更好地理解:

1. 什么是上下文对象/它的目的是什么？
2. 在Vuex中可以使用的所有属性/方法是什么？

谢谢!

我在vuex商店成功登录之后存储令牌,如下所示:

axios.post('/api/auth/doLogin.php', params, axiosConfig)
    .then(res => {
        console.log(res.data); // token
        this.$store.commit('login', res.data);
    })

axiosConfig是我只设置baseURL的文件,export default { baseURL: 'http://localhost/obiezaca/v2' }params只是发送到后端的数据.

我的vuex文件看起来是:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        logged: false,
        token: ''
    },
    mutations: {
        login: (state, response) => {
            state.logged = true;
            state.token = response;
            console.log('state updated');
            console.log('state.logged flag is: '+state.logged);
            console.log('state.token: '+state.token);
        },
        logout: (state) => {
            state.logged = false;
            state.token = '';
        }
    }
});

它工作正常,我可以根据 …