09. vuex

1、定义vuex文件（和vue2没区别）

路径：src/store/user/index.js

export default {
    namespaced: true,
    state: {
        name: 'tom',
    },
    mutations: {
        setName(state, name) {
            state.name = name;
        }
    },
    actions: {
        getName({ commit }) {
            let newName = 'linchunfeng';
            commit('setName', newName);
        }
    }
}

2、定义index.js

路径：src/store/index.js

import { createStore } from 'vuex'
import user from './user'

export default createStore({
    modules: {
        user
    }
})

vue3的Vuex对象初始化和vue2的不一样

3、在main.js注册

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


const app = createApp(App)
app.use(Store) // 注册vuex
app.mount('#app')

4、使用

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

const store = useStore();
console.log(store.state.user.name); // tom
store.dispatch("user/getName");
console.log(store.state.user.name); // linchunfeng
</script>

目录图