Vuex 小demo

最新推荐文章于 2024-03-30 18:46:10 发布

原创最新推荐文章于 2024-03-30 18:46:10 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

53 篇文章

订阅专栏

本文详细介绍了如何在Vue.js项目中使用Vuex进行状态管理，包括数据仓库的创建、状态读取、状态变更的多种方法及组件内的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div>
        <h2>{{msg}}</h2><hr/>
        <h3>{{$store.state.count}}--{{count}}</h3>
        <p>
            <button @click="$store.commit('add')">+</button>
            <button @click="$store.commit('reduce')">-</button>
        </p>
    </div>
</template>

<script>
import store from '@/vuex/store';
import { mapState } from 'vuex';

export default {
    store,
    data(){
        return{
            msg:'hello Vuex'
        }
    },
    //第一种
    /*
    computed:{
        count(){
            return  this.$store.state.count
        }
    }
    */
    //第二种
    /*
    computed:mapState({
        count:state=>state.count,
    })
    */
    //第三种
    computed:mapState(['count']),
    
}
</script>

//数据仓库
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state={
    count:1
}
const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}
//暴露出去
export default new Vuex.Store({
    state,
    mutations
})