vue(26)vuex初识

和路由类似，vuex也是vue生态中的一环属于vue的插件，在用vue create生成项目的时候可以手动配置vuex。

vuex用来存储一些全局的变量或者状态，这些存储的变量在每个组件中都可以使用或者修改，并且状态共享，即一个组件中修改了变量其他组件中的这个变量动态变化。

这里直接在之前项目中安装：npm install vuex。

然后再src下新建一个store目录，在store目录下新建一个index.js。

index.js：

import {createStore} from 'vuex'

export default createStore({

    state:{//这里面声明的变量作为全局变量

        name:"tom"

    }

});

在main.js中使用store：

import store from './store'

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

然后再所有的组件中用$store.state.name就可以访问或者改变这个变量，方法中用this.$store.state.name。

如Home.vue中添加

<h2>{{$store.state.name}}</h2>显示变量再页面上

About.vue中：

 <h2>{{$store.state.name}}</h2>

 <button @click="changeVuex()">改变vuex中的值</button>

  methods:{

    changeVuex(){

      this.$store.state.name='marry';//这里改变了name变量的值，跳转会home页面后显示的值也同样变为改变后的值即marry

    }

  }