Question

我正在尝试使用vuex过滤我的博客文章。在更改路线时，我正在从URL更新数据以获取类别名称，然后将其用作操作负载。我在方法中执行此操作，并在“ mount”中调用该方法。我的计算机具有获取博客状态的吸气剂。现在，过滤功能有时会起作用，有时会不起作用。没有错误显示。只有吸气剂使状态恢复为初始状态。我是VUEX的新手。这是我的代码。想知道我在这里做错了什么，并且有什么最佳方法可以做到这一点：

我的store.js：

state: {

        blogpost: [],

    },
    getters: {
        getblogPost(state) {
            return state.blogpost
        },

    },
    actions: {
        getblogPost(context) {
            axios.get('/blogpost')
                .then((response) => {
                    // console.log(response.data)
                    context.commit('getblogPost', response.data.posts)
                })
        },
        getPostByCatName(context, payload) {
            axios.get('/categorypost/' + payload)
                .then((response) => {
                    console.log(response.data.posts)
                    context.commit('getPostByCatName', response.data.posts)
                })
        },

    },
    mutations: {
        getblogPost(state, payload) {
            return state.blogpost = payload
        },
        getPostByCatName(state, payload) {
            state.blogpost = payload
        },

    }

这是我组件的脚本。我想要的是每次（而不是在某个时候）用过滤后的博客填充allPost（）！

data() {
        return {
            categoryName: this.$route.params.catName,
        }
    },

    computed: {
        allposts() {
            return this.$store.getters.getblogPost
        }
    },
    mounted() {
        this.filterPosts()
        this.$store.dispatch("getblogPost")


    },
    methods: {
        filterPosts() {
            this.$store.dispatch('getPostByCatName',
                this.categoryName);
        }
    }

Answer 1

我的建议是使用计算属性而不是方法

computed: {
  filteredPosts() {
    return this.$store.getters.getblogPost.map(x => x.category === this.$route.params.catName;
  }
}

计算的属性比方法“更具反应性”。这样，您依赖于数据反应性，而不是获得正确的方法顺序

每次从组件调用时，Vuex操作不会更新状态

1 个答案: