Vue.js Vuex状态数组在代理对象发生变化时将其翻转

我开发了一个从数据库获取数据的项目。我使用Vuex进行状态管理

Vuex存储文件

const store=createStore({
声明：{
notUser:{
姓名：“，
电子邮件：“”，
密码：“”
},
用户：{
名称：“”，
电子邮件：“”，
信息：[]，
关于：''，
地点：''，
年龄：''，
角色：“”，
阻止：错误
},
问题:{
标题：“”，
内容：“”
},
问题：[]，
错误消息：{
错误：false，
消息：“”，
成功：错
},
},
突变：{
errorHandler（状态、错误）{
state.errorMessage.error=true
state.errorMessage.message=error.response.data.message
},
定义者（状态，需求）{
state.user=req.data.user
console.log（state.user）
},
getProblems（状态、问题）{
state.problems=问题
console.log（state.problems）
}
},
行动：{
寄存器（{commit}，notUser）{
axios({
方法：“post”，
网址：'http://localhost:3000/api/auth/register',
数据：notUser，
事实上，
标题：{
“接受”：“应用程序/json”
}
})
。然后（res=>{
this.state.errorMessage.success=true
console.log（res.data.data.user）
})
.catch（错误=>{
this.state.errorMessage.success=false
console.log（错误响应）
提交（'errorHandler'，err）
})
},
用户登录（{commit}，notUser）{
axios({
方法：“post”，
网址：'http://localhost:3000/api/auth/login',
数据：notUser，
事实上，
标题：{
“接受”：“应用程序/json”
}
})
。然后（res=>{
this.state.user=res.data.data.user
this.state.errorMessage.success=true
console.log（this.state.user）
})
.catch（错误=>{
this.state.errorMessage.success=false
console.log（错误响应）
提交（'errorHandler'，err）
})
},
checkUser（{commit}，访问令牌）{
axios({
方法：“post”，
网址：'http://localhost:3000/api/auth/VpW02cG0W2vGeGXs8DdLIq3dQ62qMd0',
数据：访问令牌，
事实上，
标题：{
“接受”：“应用程序/json”
}
})
。然后（res=>{
console.log（res）
提交（'defineUser'，res）
返回真值
})
.catch（错误=>{
console.log（错误响应）
提交（'errorHandler'，err）
返回错误
})
},
发送问题（{commit}，问题）{
axios({
方法：“post”，
网址：'http://localhost:3000/api/problem/add',
数据：问题，
事实上，
标题：{
“接受”：“应用程序/json”
}
})
。然后（res=>{
console.log（res）
返回真值
})
.catch（错误=>{
console.log（错误响应）
提交（'errorHandler'，err）
返回错误
})
},
getAllProblems（{commit}）{
axios({
方法：“get”，
网址：'http://localhost:3000/api/problem/getall',
事实上，
标题：{
“接受”：“应用程序/json”
}
})
。然后（res=>{
提交（'getProblems'，res.data.data）
返回真值
})
.catch（错误=>{
console.log（错误响应）
提交（'errorHandler'，err）
返回错误
})
}
//registerUser（{commit}，用户）{
//提交（'注册'，用户）
// }
},

Vue组件：使用Vuex存储的位置

计算：{
…映射状态（[“用户”，“问题]）
},
安装的（）{
返回这个
},
方法：{
…映射操作（['getAllProblems']），
gotoad（）{
这是。$router.push（“/add”）
},
异步getAll（）{
这是getAllProblems（）
}
}

问题是，当我尝试使用getAllProblems操作请求时，它应该使用getProblems（）对problems变量进行变异。实际上是这样。但在problems变量更改后，它会将某个对象变为代理对象。以下是图像：

以下是代理对象的图像：

原始数据来自数据库：

---

感谢@Hasan Hasanova的评论 好的。我在安装网站之前调用了api，并使用函数从存储中获取变量。另一个问题是因为使用了错误的v-for语法。下面是代码：

computed: {
    allProblems() { // this is the problems array that i was trying to get
      return this.$store.state.allProblems
    },
    loader() {
      return this.allProblems == null ? true : false
    }
  },
  beforeMount() {
    this.$store.dispatch('getAllProblems', {root: true})
    
  },

以下是模板代码：

<div v-if="allProblems.length > 0" class="middle-side">
        <div v-for="(problem) in allProblems" :key="problem.id" class="card">
          <router-link :to="{ name: 'ProblemDetail', params: { id: problem._id, slug: problem.slug }}">
            <div class="card-header">
              <div class="card-header-title">
                <div class="user-image">
                  <img src="../../assets/problem.png" />
                </div>
                <span class="user-name">{{ problem.user.name }}</span>
              </div>

...

{{problem.user.name}
...

---

谢谢大家。

您想使用

mapActions

调用该操作。然后通过状态获取数据，而不是返回函数，因为该操作正在调用一个变量

const str = JSON.stringify(data)
return  JSON.parse(str)

POPULATE_THIS_STATE_VAR(state, data) {
    state.thisStateVar = data[0]
}

POPULATE_THIS_STATE_VAR(state, data) {
     if (data) {
          for (let i = 0; i < data.length; i++) {
              state.thisStateVar .push(data[i])
          }
     }
}