vuex的學習例子

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

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

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

我們可以從上圖很直觀的看到，數據流是單向的，從左到右，從組件出發，組件中調用action，在action這一層，我們可以和后台數據交互，然后在action中去派發mutation，mutation去觸發狀態的改變，狀態改變觸發視圖的更新。

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

一、搭建一個vue框架

二、安裝Vuex

npm install vuex --save

三、主要修改的文件目錄

四、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>

五、創建一個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
})

六、要在main.js聲明全局

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

八、實現的效果

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

實例二

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

一、目錄結構

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

三、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

 

四、actions.js文件的配置

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

傳參時的配置

五、mutations.js文件配置

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

傳參時的配置

 

 六、getters.js的配置

export const count = state => state.count

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

八、實現效果

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

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