安装

• 官网

npm install vuex@4 --save

或者

yarn add vuex@4 --save

简单使用

1. 在src下新建store，并新建index.js文件,写上如下代码

import { createStore } from "vuex"

// 创建一个新的 store 实例
const store = createStore({
    state() {
        return {
            count: 0
        }
    },
    mutations: {
        increment(state) {
            state.count++
        }
    }
})

export default store

2. 挂载到全局

import store from "./store"

const app = createApp(App)
app.use(store) // 挂载到全局

app.mount('#app')

3. 在组件中的使用，我们新建一个组件，在组件中写上如下代码

<script setup>
import { toRefs } from "vue";
import {useStore} from "vuex"

const {state,commit} = useStore()

const {count} = toRefs(state)
const add = () => {
    commit("increment")
}
</script>

<template>
    <h2>{{count}}</h2>
    <button @click="add">增加</button>
</template>

5. 运行项目

点击之后发现在vuex中的数据也是响应式的数据