this.$store.commit 存储之后怎么取出来

使用this.$store.state来获取存储在Vuex中的数据。例如：

// 存储数据
this.$store.commit('setUserName', 'John')

// 获取数据
console.log(this.$store.state.userName) // 输出John

在这个示例中，我们使用了一个名为“setUserName”的mutation来存储用户名。然后我们可以使用this.$store.state.userName来获取这个值并输出它。

相关问题

怎么往this.$store.state存数据

在Vuex中，要往`this.$store.state`存储数据，需要通过`mutations`或者`actions`来进行状态管理。

一般来说，`mutations`用于同步修改`state`中的数据，而`actions`则用于异步修改数据。

以下是一个示例，假设我们要往`state`中的`user`属性存储一个`name`字段的值：

1. 在Vuex的store.js文件中，定义一个名为`setName`的`mutation`：

// store.js

const store = new Vuex.Store({
  state: {
    user: {
      name: ''
    }
  },
  mutations: {
    setName(state, newName) {
      state.user.name = newName
    }
  }
})

2. 在组件中，通过`this.$store.commit()`来调用`setName` mutation，存储数据：

// component.vue

this.$store.commit('setName', 'John')

这样，就可以将`'John'`这个值存储到`state.user.name`属性中了。注意，在mutations中修改state的数据是同步的，只有在mutations中才可以直接修改state中的数据。如果需要异步修改数据，需要使用actions。

this.$store.commit 对对象的增删改

this.$store.commit方法是用于调用Vuex store中的mutations来进行状态的更改。对于对象的增删改操作，可以通过在mutations中定义相应的函数来实现。

例如，对于对象的增加操作，可以在mutations中定义一个函数来处理：

// 在mutations中定义一个函数用于增加对象
addObject(state, payload) {
  state.objectList.push(payload); // 假设objectList是存储对象的数组
}

然后，在组件中可以通过调用this.$store.commit来触发该函数，并传递要添加的对象作为参数：

this.$store.commit('addObject', newObject);

对于对象的删除和修改操作，也可以类似地在mutations中定义对应的函数来处理。例如，对于删除操作：

// 在mutations中定义一个函数用于删除对象
deleteObject(state, payload) {
  const index = state.objectList.findIndex(obj => obj.id === payload.id);
  if (index !== -1) {
    state.objectList.splice(index, 1);
  }
}

调用方式类似：

this.$store.commit('deleteObject', objectToDelete);

需要注意的是，mutations中的函数要遵循单一职责原则，每个函数只处理一种状态变更。