vuex的學習例子

        最近在學習vuejs,一直有據說vuex，用來實現多組件共享的一種狀態管理模式，可是網上都說，不要爲了用vuex而用vuex，大概意思就是儘可能少用vuex，一些小項目能夠用bus來實現組件之間的傳值問題。雖說不用vuex，但至少要知道這是個什麼東西吧？還要學會怎麼用。趁如今有點時間，彌補本身的不足。一些概念性的東西，仍是看官方文檔吧。Vuex2.0。

咱們先來看看官網的一張關於Vuex的圖

Vuex規定，屬於應用層級的狀態只能經過Mutation中的方法來修改，而派發mutation中的事件只能經過action來進行。

咱們能夠從上圖很直觀的看到，數據流是單向的，從左到右，從組件出發，組件中調用action，在action這一層，咱們能夠和後臺數據交互，而後在action中去派發mutation，mutation去觸發狀態的改變，狀態改變觸發視圖的更新。

下面直接用例子來認識一下vuex。

1、搭建一個vue框架

2、安裝Vuex

npm install vuex --save

3、主要修改的文件目錄

4、Counter.vue文件

 

<template>
  <div id="app">
    Count is {{$store.state.count}}//使用
    <button @click="increment">+5</button>
    <button @click="decrement">-3</button>
  </div>
</template>
<script>
  // 引入mapActions，很重要
  import { mapGetters, mapActions } from 'vuex'
  export default{
    computed: mapGetters([//與vuex中的getters關聯

    ]),

    methods: mapActions([//與vuex中的actions關聯
      'increment',
      'decrement'
    ])
  }
</script>

5、建立一個vuex文件夾，文件夾裏面建立一個store.js文件（關鍵）

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

Vue.use(Vuex)
// 首先聲明一個狀態 state
const state = {
  count: 0
}

// 而後給 actions 註冊事件處理函數，當這個函數被觸發時，將狀態提交到 mutaions中處理
const actions = {
  increment: ({ commit }) => commit('increment'), // 提交到mutations中處理
  decrement: ({ commit }) => commit('decrement')
}
// 更新狀態
const mutations = {
  increment (state) {
    state.count = state.count + 5
  },
  decrement (state) {
    state.count = state.count - 3
  }
}
// 獲取狀態信息
const getters = {
}

// 下面這個至關關鍵了，全部模塊，記住是全部，註冊才能使用
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

6、要在main.js聲明全局

 7、在index.js中對Counter.vue設置路由

8、實現的效果

以上就是一個很簡單的一個計數的例子，對vuex有了一個小小的認識，可是對【state,mutations,actions,getters，modules】這幾個狀態的用法還不是很明確?後段時間，仍是繼續用例子來加深對他們的理解。

實例二

上面的例子，我是把【state,mutations,actions,getters，modules】這幾個狀態放在store.js這個文件內，如今就把這幾個拆開爲幾個文件，加深理解。

1、目錄結構

2、Counter.vue的配置，主要標紅的地方實例一的區別

3、store的入口文件index.js的配置

 

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import * as actions from './actions'
import * as mutations from './mutations'

Vue.use(Vuex)
// 首先聲明一個狀態 state
const state = {
  count: 0
}
// 下面這個至關關鍵了，全部模塊，記住是全部，註冊才能使用
const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})
export default store

 

4、actions.js文件的配置

//actions 註冊事件處理函數，當這個函數被觸發時，將狀態提交到 mutaions中處理
export const increment = ({ commit }) => commit('increment')
export const decrement = ({ commit }) => commit('decrement')

傳參時的配置

5、mutations.js文件配置

// 狀態值的改變方法,操做狀態值
// 提交mutations是更改Vuex狀態的惟一方法
export const increment = state => {
  state.count = state.count + 5
}
export const decrement = state => {
  

傳參時的配置

 

 6、getters.js的配置

export const count = state => state.count

7、main.js和路由index.js的配置

8、實現效果

好了。對vuex有了更深的一層理解。可是這還遠遠還不夠。接下來就是在項目中用vuex實現登陸，保存用戶信息。

謝謝yuwenjing的分享：http://www.cnblogs.com/yuwenjing0727/p/7205577.html