vuex 状态管理

最新推荐文章于 2024-07-21 22:54:00 发布

强直也要学编程

最新推荐文章于 2024-07-21 22:54:00 发布

阅读量64

点赞数

本文链接：https://blog.csdn.net/weixin_52374211/article/details/116903049

版权

这篇博客介绍了如何在Vue应用中利用Vuex来管理状态。首先在根目录创建了一个Vuex store，定义了state、mutations和actions，用于存储历史记录列表并提供增删功能。然后在main.js中引入store并注入到Vue实例中。最后，在组件中通过计算属性映射state，并调用actions来修改历史记录。

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

在根目录下新建一个目录，里面新建一个js文件

import Vue form ‘vue’
import Vuex form ‘vuex’
Vue.use(Vuex)
const store = new Vuex.Store({
    //数据源
    state:{
        historyList:[]
    },
    //mutations可以改变数据源里的数据
    mutations:{
        SET_HISTORY_LIST(state,history){
            state.histoyrList=history
        }
    },
    //actions操作mutations里的函数
    actions:{
        set_history({commit,state},history){
            let list = state.historyList
            list.unshift(history)
            commit(‘SET_HISTORY_LIST’,list)
        }
    }
})
export default store

在main.js里引入

import store form ‘./store’
const app = new Vue({
    store,
    ...app
})

在页面中导入

import {mapState} form ‘vuex’
computed:{
    ...mapState([‘historyList’])
},
methods:{
    testBtn(){
        this.$store.dispatch(‘set_history’,{
            name:’test’
        })
    }
}