vue+vuex实现修改一个列表项功能

最新推荐文章于 2024-08-08 22:30:15 发布

Alisane

最新推荐文章于 2024-08-08 22:30:15 发布

阅读量1.4k

点赞数 2

分类专栏： Vue.js

本文链接：https://blog.csdn.net/wsymcxy/article/details/86716704

版权

本文介绍如何在Vue项目中结合Vuex，实现在articleList.vue组件中点击列表项跳转到updateArticle.vue进行编辑。点击时，将当前选中项的详情保存至Vuex状态管理中，在updateArticle.vue页面中可以获取并使用该数据进行更新操作。

摘要由CSDN通过智能技术生成

store.js文件夹下的baseInfo.js

export default {
  state: {
    token:'',
    currentArtDetails:{}
  },
  mutations: {
    setToken (state, newUser) {
      state.token = newUser;
    },
    setCurrentArtDetails(state, newUser){
      state.currentArtDetails = newUser;
    },
  }
}

articleList.vue 点击修改跳转到updateArticle.vue，并将点击的当前项保存至vuex中。

<template>
    <div>
        <div v-for="item in articleList">
             <a href="#/updateArticle" @click="getArticleInfo(item)">修改</a>
        </div>    
    </div>
</template>
<script>
    import { mapState } from 'vuex';
    export default {
        methods:{
            getArticleInfo(item){
                this.$store.commit('setCurrentArtInfo',item);
            }
        }
    }
</s