vue3 setup语法糖 Vuex的基本引入和使用

vuex的引入和基本使用

vue3组合式api，vuex引入和基本使用

1.安装vuex

npm install vuex@next

2.创建文件夹

/store/index.js

3.定义store

index.js

import { createStore } from "vuex";
const store = createStore({
    state(){
        return {
            count:0
        }
    },
    mutations:{
        add(state,n){
            state.count+=n
        }

    }
})
export default store

4.挂载store

main.js

import { createApp } from 'vue'
import store from './store'
import App from './App.vue'

createApp(App).use(store).mount('#app')

5.使用store

App.vue

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
const state = useStore()
const count = computed(()=>state.state.count)
</script>

<template>
<div>和：{{ count }}</div>
<button type="button" @click="state.commit('add',1)">+1</button>
<button type="button" @click="state.commit('add',5)">+5</button>
</template>

<style scoped>

</style>

结果

)">+5

**结果**

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/21d8605e3c2a4e4e8f54b6a12dfe0dc0.png#pic_center)