怎么把当前行的id存入vuex中,并在需要的页面中获取该id
时间: 2023-06-14 13:06:43 浏览: 98
在存储当前行id的时候,可以在Vue组件中调用Vuex store的action,将当前行id作为参数传递给该action,然后在action中将id存储到Vuex的state中。代码示例如下:
```javascript
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
currentRowId: null
},
mutations: {
setCurrentRowId(state, id) {
state.currentRowId = id
}
},
actions: {
setCurrentRowId({ commit }, id) {
commit('setCurrentRowId', id)
}
},
getters: {
getCurrentRowId: state => state.currentRowId
}
})
```
然后在需要存储当前行id的组件中,调用Vuex store的action,将当前行id传递给该action即可。代码示例如下:
```javascript
// MyComponent.vue
<template>
<div>
<table>
<tr v-for="item in items" :key="item.id" @click="setCurrentRow(item.id)">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</table>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: 'MyComponent',
methods: {
...mapActions(['setCurrentRowId']),
setCurrentRow(id) {
this.setCurrentRowId(id)
}
}
}
</script>
```
在需要获取当前行id的页面中,可以通过Vuex store的getter获取当前行id。代码示例如下:
```javascript
// MyPage.vue
<template>
<div>
<div>当前行id: {{ currentRowId }}</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'MyPage',
computed: {
...mapGetters(['getCurrentRowId']),
currentRowId() {
return this.getCurrentRowId
}
}
}
</script>
```
阅读全文