Vuex 只修改对象里的某一个值

在 Vuex 中，如果你只想修改一个对象中的某个属性，可以通过以下步骤实现：

1.在 state 中定义对象以及属性

state: {
  user: {
    name: 'John',
    age: 25,
    email: 'john@gmail.com'
  }
}

2.在 mutations 中定义更新对象属性的方法

mutations: {
  updateUserName(state, name) {
    state.user.name = name
  }
}

3.在组件中使用 $store.commit 方法来调用该方法

this.$store.commit('updateUserName', 'Jack')

这样就可以只修改对象里的某一个值了。注意，这里我们直接修改了 state 中的属性，因为 Vuex 的状态是响应式的，所以这个修改会自动触发视图的更新。

相关问题

vue中点击某一行，跳转到对应页面，并把当前行的id 通过 this.$store.commit存入vuex中定义，在对应页面中获取到该id的值，代码实现

### 回答1：
首先，在点击行时，可以通过绑定@click事件触发相应的方法：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in dataList" :key="item.id" @click="handleClick(item.id)">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td><button>编辑</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { id: 1, name: "张三" },
        { id: 2, name: "李四" },
        { id: 3, name: "王五" },
      ],
    };
  },
  methods: {
    handleClick(id) {
      this.$store.commit("SET_CURRENT_ID", id);
      this.$router.push("/detail");
    },
  },
};
</script>

在方法中，先通过`this.$store.commit`将当前行的id存入vuex中，然后使用`this.$router.push`进行路由跳转，跳转到详情页面。

在详情页面中，可以通过`this.$store.state.currentId`获取到存储在vuex中的当前id值：

<template>
  <div>
    <p>当前ID: {{ currentId }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    currentId() {
      return this.$store.state.currentId;
    },
  },
};
</script>

在计算属性中，通过`this.$store.state.currentId`获取到存储在vuex中的当前id值，然后在模板中渲染即可。

### 回答2：
在Vue中点击某一行，跳转到对应页面，并将当前行的id通过this.$store.commit方法存入Vuex中定义，在对应页面中获取该id的值的实现代码如下：

1. 首先，在Vue组件中定义一个点击行的方法，将id作为参数传入，然后调用this.$store.commit方法将id存入Vuex。

methods: {
  handleClickRow(id) {
    this.$store.commit('SET_SELECTED_ROW_ID', id); // 将id存入Vuex中名为SET_SELECTED_ROW_ID的mutation
    // 进行页面跳转
    // 例如：this.$router.push('/detail');
  }
}

2. 在Vuex的store中，首先定义state属性selectedRowId来存储选中行的id，然后定义mutation来修改selectedRowId的值。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    selectedRowId: null // 存储选中行的id
  },
  mutations: {
    SET_SELECTED_ROW_ID(state, id) {
      state.selectedRowId = id;
    }
  }
})

3. 在需要获取选中行id的页面中，通过this.$store.state.selectedRowId来获取该值。

// detail.vue
export default {
  computed: {
    selectedRowId() {
      return this.$store.state.selectedRowId;
    }
  }
}

以上就是实现Vue中点击某一行，跳转到对应页面，并将当前行的id通过Vuex存储，在其他页面中获取该id值的代码实现。

### 回答3：
在Vue中，实现点击某一行后跳转到对应页面并将当前行的id存入Vuex中定义，然后在对应页面中获取该id的值，可以按照以下步骤进行实现。

1. 首先，需要在Vue组件的template部分添加点击事件，当某一行被点击时触发该事件。例如：

<template>
  <div>
    <ul>
      <li v-for="item in items" @click="goToDetail(item.id)">{{ item.name }}</li>
    </ul>
  </div>
</template>

其中，items是一个数组对象，用于展示列表数据。@click绑定了一个goToDetail方法，将当前行的id作为参数传入。

2. 在Vue组件的script部分，定义goToDetail方法，并在该方法中使用this.$store.commit将当前行的id存入Vuex中定义的状态。例如：

<script>
export default {
  methods: {
    goToDetail(id) {
      this.$store.commit('SET_SELECTED_ID', id);
      // 在这里进行页面跳转，例如使用Vue Router的方式进行跳转
      this.$router.push('/detail');
    },
  },
};
</script>

在上述示例中，通过this.$store.commit调用名为SET_SELECTED_ID的mutations方法，将id存入Vuex中。

3. 在对应的页面中，可以通过this.$store.state访问到存储在Vuex中的id。例如：

<template>
  <div>
    <h1>页面详情</h1>
    <p>当前行id: {{ selectedId }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    selectedId() {
      return this.$store.state.selectedId;
    },
  },
};
</script>

上述示例中，通过computed属性获取Vuex中的selectedId状态，并在模板中渲染出来。

综上所述，通过以上方式可以实现在Vue中点击某一行后跳转到对应页面，并将当前行的id存入Vuex中定义，然后在对应页面中获取该id的值。