Vue3中Vuex Store内无法更新state的posts数组问题求助

核心错误原因 #

1. Vuex规范要求：必须通过mutation修改state，不管Vue2还是Vue3，action的职责是处理异步逻辑，不能直接修改state——你之前Vue2的写法可能是疏忽，严格来说也不符合规范。
2. 当前代码中state的定义有语法错误：state()是函数，必须返回一个对象，你漏写了return。
3. 在action中直接访问state的方式错误，且就算能访问，直接修改也会触发Vuex的限制。

分步修复方案 #

1. 修复state的语法错误

修改state的定义，确保是返回对象的函数：

state() {
  return {
    posts: [{}],
    totalPosts: 0 // 对应getters里的totalPosts，需要初始化
  }
},

2. 添加更新posts的mutation

在mutations中新增专门更新posts的方法：

mutations: {
  setCurrentPost(state, newPost) {
    state.currentPost = newPost
    console.log('product mutation -->    ' + state.currentPost.title)
  },
  // 新增：更新posts数组的mutation
  setPosts(state, posts) {
    state.posts = posts
  }
},

3. 在action中通过commit调用mutation

修改action，通过context.commit触发mutation来更新state，同时优化context的使用（可以解构出commit）：

actions: {
  // 解构context，直接拿到commit方法
  actionLoadListPosts({ commit }, info) {
    console.log(info)
    axios
      .get(`${baseApiURL}/blog/${info.page}/${info.recordsPerPage}`, {
        headers: {
          Authorization: 'System b24b3b0e-9257-466b-949e-8c0c3841eeb5'
        }
      })
      .then((response) => {
        info.showLoader = false
        console.log(response.data.posts)
        // 调用mutation更新posts
        commit('setPosts', response.data.posts)
        // 如果要查看更新后的state，需要通过context.state，不是this
        // console.log(context.state.posts)
      })
  }
}

关键说明 #

• 你觉得“在store内部使用mutation不合理”是误解：mutation是Vuex设计中唯一允许同步修改state的入口，所有状态变更都通过mutation，能保证状态变更可追踪，方便调试和维护。
• Vue2中如果直接在action改state没报错，是因为Vue2的响应式系统没有严格限制，但这属于不规范写法，Vuex官方文档一直要求通过mutation修改state。

内容的提问来源于stack exchange，提问作者Val