Vuex 簡單實例

前一段時間由於須要使用vue，特意去學習了一下。可是時間匆忙vuex沒有接觸到，今天閒暇時看了解了一下vuex，並作了一個小demo，用於記錄vuex的簡單使用過程。

什麼是Vuex？

vuex是專門爲vue.js應用程序開發的一種狀態管理模式，當多個視圖依賴於同一個狀態或是多個視圖都可更改某個狀態時，將共享狀態提取出來，全局管理。

下面是一個計數器的例子

在src目錄下建立一個store文件夾。
src/store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
    show: ''
  },
  getters: {
    counts: (state) => {
      return state.count
    }
  },
  mutations: {
    increment: (state) => {
      state.count++
    },
    decrement: (state) => {
      state.count--
    },
    changTxt: (state, v) => {
      state.show = v
    }
  }
})

export default store

state就是咱們的須要的狀態，狀態的改變只能經過提交mutations,例如：

handleIncrement () {
      this.$store.commit('increment')
    }

帶有載荷的提交方式：

changObj () {
      this.$store.commit('changTxt', this.obj)
    }

固然了，載荷也能夠是一個對象，這樣能夠提交多個參數。

changObj () {
      this.$store.commit('changTxt', {
          key:''
      })
    }

在main.js中引入store.js

import store from './store/store'
export default new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

在組件中使用

在組建能夠經過$store.state.count得到狀態
更改狀態只能以提交mutation的方式。

<template>
<div class="store">
  <p>
    {{$store.state.count}}
  </p>
  <el-button @click="handleIncrement"><strong>+</strong></el-button>
  <el-button @click="handleDecrement"><strong>-</strong></el-button>
  <hr>
  <h3>{{$store.state.show}}</h3>
  <el-input
    placeholder="請輸入內容"
    v-model="obj"
    @change="changObj"
    clearable>
  </el-input>
</div>
</template>
<script>
export default {
  data () {
    return {
      obj: ''
    }
  },
  methods: {
    handleIncrement () {
      this.$store.commit('increment')
    },
    handleDecrement () {
      this.$store.commit('decrement')
    },
    changObj () {
      this.$store.commit('changTxt', this.obj)
    }
  }
}
</script>

到這裏這個demo就結束了，

感受整個個過程就是一個傳輸數據的過程，有點相似全局變量，可是vuex是響應式的。
這裏固然並無徹底發揮出所有的vuex，
vuex還在學習中，寫這篇文章主要是記錄其簡單的使用過程。