vuexd

1.安装Vuex

npm i vuex -s

 2.在项目的根目录下新增一个store文件夹，在store文件夹store.js文件

内容为

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        name:'helloVueX'
    }
})

export default store

 3. 将store挂载到当前项目的Vue实例当中去

 

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4. 在组件中使用Vuex

<template>
    <div>
        name:
        <h1>{{ $store.state.name }}</h1>
    </div>
</template>