前言

vuex用于全局共享数据，存储在vuex的数据，各个组件都能进行使用，方便进行数据共享。没有vuex之前，页面之间都是靠事件来传递数据，比较不方便。

安装

npm i vuex

配置

​ 1.src下创建store目录

2. stroe目录下创建以下几个文件

   state.js

   js

   复制代码

   
   /*
   存放各种需要共用的属性
    */
   export default {
   
   
   }

   actions.js

   js

   复制代码

   /*
   通过操作mutations来操作state
    */
   
   export default {
   
   }
   

   mutations.js

   js

   复制代码

   /*
       直接操作state的地方
    */
   export default {
   
   
   }

   getters.js

   js

   复制代码

   /*
   针对state中属性的一个计算属性
    */
   export default {
   
   }

   index.js

   js

   复制代码

   // 这里是核心配置文件，创建Vuex对象的地方
   import Vue from 'vue'
   import Vuex from 'vuex'
   import state from "./state";
   import actions from "./actions";
   import mutations from "./mutations";
   import getters   from "./getters";
   
   Vue.use(Vuex) //注册
   
   export default new Vuex.Store({
       state,
       mutations,
       actions,
       getters
   })

3.在main.js中引入，并挂载到vue对象身上

import store from './store' //引入 store下的index.js

new Vue({
  render: h => h(App),
  router,
  store 	//挂载到vue身上
}).$mount('#app')

验证配置结果

只要vuex配置成功，vue对象或者vuecomponent对象身上都会多出一个 $store属性

我们在app.vue中加上mounted方法打印一下

<script>
    export default {
        name: "App",

        mounted() {
            console.log(this.$store);
        }

    }
</script>

控制台查看