前言
vuex用于全局共享数据,存储在vuex的数据,各个组件都能进行使用,方便进行数据共享。没有vuex之前,页面之间都是靠事件来传递数据,比较不方便。
安装
npm i vuex
配置
1.src下创建store目录
-
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>
控制台查看