Question

我将Vuex与Axios发布请求结合使用，以在数据库中创建新列表，然后我想获取最新的ID，以便可以将用户重定向到新创建的列表。我尝试使用其他选项，请参见下面的组件中的console.log，它始终返回1（默认值）。我如何获得最新的ID？

我的回答如下：

1 - with getters - 1
2 - with computed - 1
3 - with vuex - 1
0 - 94

index.js

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

import placeList from './modules/placeList';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        placeList
    },
});

placeList.js

import Axios from 'axios';

const state = {
    newId: 1,
    name: '',
    description: '',
    private: 0,
};

const mutations = {
    setNewId(state, newId) {
        state.newId = newId;
    },
};

const getters = {
    getNewId: state => {
        return state.newId;
    }
};

const actions = {
    createNewPlaceList({ commit }, url ) {
         Axios
            .post(url, {
                'name': state.name,
                'description': state.description,
                'private': state.private,
            })
            .then(response => {
                commit('setNewId', response.data.newPlaceListId);

                console.log('0 - ' + response.data.newPlaceListId);
            })
            .catch(errors => {
                console.log(errors);
            });
    }
};

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
};

组件

    import { mapState } from 'vuex';
    import { mapGetters } from 'vuex';

    export default {
        name: "PlaceListCreate",

        methods: {
            submitForm: function () {
                this.$store.dispatch('placeList/createNewPlaceList', <API URL>);

                console.log('1 - with getters - ' + this.testNewId);
                console.log('2 - with computed - ' + this.anewId);
                console.log('3 - with vuex - ' + this.$store.state.placeList.newId);

                // Redirect to new created list
                     this.$router.push({ name: 'active-list', params: {
                            id: <New ID>
                }});
            },
        },

        computed: {
            ...mapState([
                'name',
                'description',
                'private',
                'newId'
            ]),

            ...mapGetters([
                'getNewId'
            ]),

            anewId() {
                return this.$store.state.placeList.newId;
            },

            testNewId () {
                return this.$store.getters['placeList/getNewId'];
            }
        },
    }

Answer 1

发生这种情况是因为Opening a second instance of Microsoft Excel causes Windows to load a new copy of the program into memory. This can be useful when you find yourself waiting a long time for Excel to complete complex operations in a large spreadsheet. Opening a second instance of Excel allows you to work with on a different spreadsheet while the first instance of the program is busy. Desktop View 1. Open your first instance of Excel, and then right-click the Excel icon on the Desktop taskbar. 2. Hold down the "Alt" key and select "Excel 2013" from the pop-up menu. 3. Continue holding down the "Alt" key until you see a prompt asking you if you want to start a new instance of Excel. Click "Yes" to open the new instance. Start Screen 1. Open your first instance of Excel, and then right-click the Excel tile on the Start screen. 2. Hold down the "Alt" key and click "Open New Window" on the Start screen taskbar. 3. Continue holding down the "Alt" key until you see a prompt asking you if you want to start a new instance of Excel. Click "Yes" to open the new instance.是异步的，使此功能异步是一种方式：

placeList.js

createNewPlaceList

组件

const actions = {
    async createNewPlaceList({ commit }, url ) {
         await Axios
            .post(url, {
                'name': state.name,
                'description': state.description,
                'private': state.private,
            })
            .then(response => {
                commit('setNewId', response.data.newPlaceListId);

                console.log('0 - ' + response.data.newPlaceListId);
            })
            .catch(errors => {
                console.log(errors);
            });
    }
};

如何使用Vuex和Axios发布请求获取最新ID

1 个答案: