vue + vuex 簡單案例

能夠參考vuex官網： vuex.vuejs.org 文檔學習vuex原理和工做流程

什麼是vuex，有什麼用？

官方解釋是：Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

首先要安裝：cnpm install vuex -D，而不是install vuex -S

1. 這個狀態自管理應用包含如下幾個部分：

• state，驅動應用的數據源；
• view，以聲明方式將 state 映射到視圖；
• actions，響應在 view 上的用戶輸入致使的狀態變化

「單向數據流」結構的示意圖：

官方的vuex的工做流程圖：

2. 每個 Vuex 應用的核心就是 store（倉庫），經過改變提交(commit) mutation，來改變store中的狀態，vuex中幾種狀態： State, Getters, Actions, Mutations

廢話很少少，直接上代碼：

1.首先建立一個store.js文件，代碼以下

import vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
  count: 1
}

const getters = {
  count: state => state.count
}

const actions = {
  increment: ({ commit }) => {
    commit('increment')
  }
}

const mutations = {
  increment (state) {
    state.count++
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})複製代碼

2.在main.js文件中引入store.js文件

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store' // 路徑爲建立的時候

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})複製代碼

3.在Demo.vue中寫入事件名：（點擊的時候，依次增長）, 具體見Demo.vue
Vuex兩個重要的方法：mapActions（處理全部的事件）和 mapGetters（獲取全部的數據）

HTML代碼：

<div>
    <input type="button" @click="increment" value="點擊增長">
    <div>當前的計數爲：{{count}}</div>
  </div>複製代碼

js代碼：

import {mapGetters, mapActions} from 'vuex'
  computed: {
    ...mapGetters({
      count: 'count'
    })
  }
  methods: {
    ...mapActions({ // 處理註冊事件
      'increment': 'increment',
    })
  }複製代碼

能夠參考個人GitHub地址：github.com/guixianleng…