一、前言

在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

image.png

• 1. 使用this.$store.state.count来获取count的值
• 2.使用commit来调用Vuex中mutations里面的方法