vuex的學習例子

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

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

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

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

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

1、搭建一個vue框架框架

2、安裝Vuex函數

npm install vuex --save學習

3、主要修改的文件目錄spa

4、Counter.vue文件3d

 

<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

相關文章
相關標籤/搜索