一、前言
在SPA模式下，如果数据和方法只能在当前组件访问和使用，其他组件是无法读取和修改的，那么这样明显是不合理的。这里我们就引入了一个vuex的概念。vuex就是设计用来统一管理组件状态的，它定义了一系列规范来使用和操作数据，使组件的应用更加高效。
二、Vuex
1.用法
在使用vuex插件之前先安装，使用命令：cnpm install vuex --save,它的使用和Vue Router相似，也需要先导入，然后调用Vue.use()使用。
我们先通过一个计数器的案例来引入Vuex的使用，具体步骤如下，在src文件夹下新建store文件夹，里面存放整个项目需要的共享数据，在store下新建index.js。
//store/index.js
import Vue from 'vue'
import Vuex from 'Vuex'
Vue.use(Vuex);
export default new Vuex.Store({
// state存放所有共享数据
state :{
count : 0,
},
mutations:{
increment:state =>state.count++,
decrement:state =>state.count--
}
});
// helloWorld.vue
<template>
<div class="hello" >
<h1>监听count的改变{{count}}</h1>
<Button type="info" @click="increment">+</Button>
<Button type="info" @click="decrement">-</Button>
</div>
</template>
<script>
export default {
computed:{
count(){
return this.$store.state.count;
}
},
methods:{
increment(){
this.$store.commit("increment");
},
decrement(){
this.$store.commit("decrement");
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.parent{
background-color: pink;
width: 200px;
height: 200px;
}
.child{
background-color: green;
width: 100px;
height: 100px;
margin: 0 auto;
}
</style>
// nain.js
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import store from '@/store'
import 'iview/dist/styles/iview.css'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter);
Vue.use(iView);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
运行结果，
image.png
当我们点击
+的时候，count会增加，点击-的时候，count会减少。如图，
image.png
- 使用
this.$store.state.count来获取count的值- 2.使用
commit来调用Vuex中mutations里面的方法
