• 用途
  Vuex 是Vue配套的公共數(shù)據(jù)管理工具，它可以把一些共享數(shù)據(jù)保存到vuex，方便程序中的任何組件使用和修改公共數(shù)據(jù)
  參考官網(wǎng)
• 使用方式
  安裝：cnpm i vuex --save
  導(dǎo)包：import Vuex from 'vuex'
  注冊(cè)Vuex到vue中：Vue.use(Vuex)
  創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)倉(cāng)儲(chǔ)對(duì)象：
  const store = new Vuex.Store({ state:{ count:0 }, mutations:{ } })
  掛載：

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store,//只要掛在到vm身上，任何組件都可以使用
})

• 項(xiàng)目使用vue-cli構(gòu)建
  組件通信關(guān)系為平級(jí)，不是父子組件，樣式有使用mui的樣式
  
  image.png
  
  
  image.png

• main.js文件中代碼

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false
//導(dǎo)包
import Vuex from 'vuex'
//注冊(cè)Vuex到vue中
Vue.use(Vuex)
//創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)倉(cāng)儲(chǔ)對(duì)象
const store = new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    //注意：如果想操作store中的state的值，只能通過(guò)mutations提供的方法才能操作對(duì)應(yīng)的數(shù)據(jù)，不能直接操作state中的數(shù)據(jù)，萬(wàn)一各個(gè)組件的直接操作會(huì)
    //導(dǎo)致數(shù)據(jù)的紊亂，也不能快速定位到原因，因?yàn)?，每個(gè)組件都有操作數(shù)據(jù)的方法
    increment(state){
      state.count++;
    },
    //注意調(diào)用mutations調(diào)用該方法的話，只能通過(guò)this.$store.commit('方法名'),這種調(diào)用和子組件調(diào)用父組件的方法很像this.$emit("方法名")
    //第二個(gè)為參數(shù)的值可以傳對(duì)象
    subtract(state,obj){
      state.count-=obj.nun;
    }
  },
  getters:{
    //注意：這里的getters只負(fù)責(zé)對(duì)外提供數(shù)據(jù)，不負(fù)責(zé)修改數(shù)據(jù)，如果想要修改數(shù)據(jù)，請(qǐng)找mutations,使用方式：this.$store.getters.opt
    //getters中的方法和組件過(guò)濾器中的類(lèi)似，他們都沒(méi)有修改數(shù)據(jù)，而是將數(shù)據(jù)進(jìn)行一層包裝，提供給調(diào)用者，
    //computed和getters比較像，只要state中的數(shù)據(jù)發(fā)生了變化，那么getters也正好要使用state中的數(shù)據(jù)，那么會(huì)立刻觸發(fā)getters重新求值
    opt(state){
      return '當(dāng)前的值為：'+ state.count
    }
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store,//只要掛在到vm身上，任何組件都可以使用
})

• app.vue中的代碼

<template>
  <div id="app">
    <!-- <router-view/> -->
    <account></account>
    <hr>
    <complete></complete>
  </div>
</template>

<script>
  import account from '@/components/account'
  import complete from '@/components/complete'
  import './lib/css/css/mui.min.css'
  /* import './lib/js/mui.min.js' */
  export default {
    name: 'App',
    data() {
      return {

      }
    },
    methods:{

    },
    components:{
      account,
      complete
    }
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

• account.vue中的代碼

<template>
  <div class="mui-numbox">
    <button class="mui-btn mui-btn-numbox-minus" type="button" @click='sub'>-</button>
    <input class="mui-input-numbox" type="number" v-model = 'this.$store.state.count'/>
    <button class="mui-btn mui-btn-numbox-plus" type="button" @click="add">+</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods:{
      add() {
        //千萬(wàn)不要這么使用，不符合vuex的設(shè)計(jì)理念，
        //this.$store.state.count++;
        this.$store.commit('increment')
      },
      sub() {
        this.$store.commit('subtract',{name:'y',nun:2})
      }
    }
  }
</script>

<style>
</style>

• complete.vue中的代碼

<template>
  <div>
    <div>當(dāng)前數(shù)量為：{{this.$store.state.count}}</div>
    <hr>
    <div>{{this.$store.getters.opt}}</div>
  </div>

</template>

<script>
</script>

<style>
</style>