4.阳光沙滩-Vue移动端教程-引入vuex

前言

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

安装

npm i vuex

配置

​ 1.src下创建store目录

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

   state.js

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

   actions.js

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

   mutations.js

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

   getters.js

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

   index.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>

控制台查看