vuex的简单使用

vuex，感觉就像是类似于内存（项目的全局变量）一样的东西，可以直接全局给其他地方的组件使用

1.安装（打开项目，cmd执行）

vue add vuex

2.目录结构（发现直接都已经有了store，主要是store里的index.js、main.js-这个已经默认安装好了、demo.vue页）

demo.vue

<template>
    <h1>{{username}}</h1>
</template>


<script>
    import {} from 'vuex'
    export default{
        name:'demo',
        data(){
            return{
                msg:'这是个Demo'
            }
        },
        computed:{
            username(){
                return this.$store.state.username
            }
        }
    }
</script>

<style>
</style>

 

main.js

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

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

 

 demo.vue

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

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

 

运行显示结果：

 

 

 参考：https://www.bilibili.com/video/BV1UJ411c7Qe?p=27&spm_id_from=pageDriver

感谢：https://blog.csdn.net/u010520146/article/details/108095463