VUEx基本用法

npm install --save-dev VUEX

Vuex的设计是用来管理组件状态，定义了一系列规范使用和操作数据，能够跨组件共享数据

使用VUEX需要VUE支持，提前配置

安装完成后在main.js导入

import Vuex from 'vuex';
//告诉VUE使用VUEX
Vue.use(Vuex);

配置Vuex

//路由配置
const Routers=[
  {
  path:'...',
    meta:{
    title:''     
}
    component:(resolve)=>require(['path'],resolve)
   },
  {
}
.....
]
const RouterConfig = {
    // 使用 HTML5 的 History 路由模式
    mode: 'history',
    routes: Routers
};
const router = new VueRouter(RouterConfig);

router.beforeEach((to, from, next) => {
    window.document.title = to.meta.title;
    next();
});

router.afterEach((to, from, next) => {
    window.scrollTo(0, 0);
});
//vux配置
const store=new Vuex.store({
//配置VUEX
state:{
  count:0
 },
mutations:{
  increment:(state){
   state.count++;
},
decrease:(state){
  state.count--;
}
}
})

定义了数据count后，在任何组件内可以通过$store.state.count读取：

//index.vue
<template>
<div>
<h1>首页</h1>
{{count}}
<button @click="handleIncrement">+1</button>
<button @click="handleDecrease">-1</button>
</div>
</template>
<script>
export default{
   computed:{
   count(){
  return this.$store.state.count; 
},
  methods:{
   handleIncrement(){
    this.$store.commit('increment');
} ,
    handleDecrease(){
    this.$store.commit('decrease');
} 
}
}
}
</script>

在mutations中定义了 方法后，通过commit提交修改state的数据