vue學習筆記(五)：對於vuex的理解 + 簡單實例

優點：通過定義和隔離狀態管理中的各種概念並強制遵守一定的規則，我們的代碼將會變得更結構化且易維護。使用vuex來引入外部狀態管理，將業務邏輯切分到組件外，可以避免重復的從服務端抓取數據。

 詳情請參考官網文檔__鏈接

規則：

1:應用層級的狀態應該集中到單個 store 對象中。

2:提交 mutation 是更改狀態的唯一方法，並且這個過程是同步的

3:異步邏輯都應該封裝到 action 里面

 

使用場景1：例如要實現在一個顯示組件中提交表單，另一個組件的內容需要隨之改變：

沒有使用vuex前： (與服務端交互2次)

表單組件提交內容時，我們需要與服務端交互一次(提交)；

顯示組件更新內容時：我們又需要與服務端交互一次(獲取)。

使用vuex后： (與服務端交互1次)

表單組件提交內容時，我們在actions中與服務端交互，然后觸發mutation，改變state中的數據狀態；

顯示組件直接使用getters獲取states中的數據。

 

使用場景2：如果組件只在本地改變數據，不與服務端交互，並且顯示組件也要隨之改變。那不使用vuex是非常難實現的。

沒有使用vuex前：

?

使用vuex后：

觸發mutation，改變state中的數據狀態；

顯示組件直接使用getters獲取states中的數據。

 

 

實例1：加減法，實現組件間的值一同變化

文件目錄：

 

1：編寫app.vue

<template>
  <div id="app">
    <router-view></router-view>
    <div>
      count is {{count}}
     <router-link to="/component1">組件1</router-link>
     <router-link to="/component2">組件2</router-link>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
export default {
  name: 'app',
  computed: mapGetters([
    'count'
  ])
}
</script>

這里需要知道mapGetters的含義: mapGetters 輔助函數僅僅是將 store 中的 getters 映射到局部計算屬性。 傳送門

 

2:編寫 component1.vue和 component2.vue。

這兩個組件的內容一樣(組件二中，請改為 組件2 count is，是為了好區分)：

<template>
  <div class="hello">
    組件1count is {{count}}
    <button @click="increment">+5</button>
    <button @click="decrement">-3</button>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
export default {
  computed: mapGetters([
    'count'
  ]),
  methods: mapActions([
    'increment',
    'decrement'
  ])
}
</script>

　　

3:router/index.js 路由文件

import Vue from 'vue'
import Router from 'vue-router'
import component1 from '@/components/component1'
import component2 from '@/components/component2'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/component1',
      name: 'component1',
      component: component1
    },
    {
    	path: '/component2',
      name: 'component2',
      component: component2
    }
  ]
})

　　

4:編寫vuex/index.js   

import Vue from 'vue'
import Vuex from 'Vuex'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

const state = {
	count: 0
}

const store = new Vuex.Store({
	state,
	getters,
	actions,
	mutations
})

export default store

這里需要知道state的含義：傳送門

 

5:編寫vuex/actions.js

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

export default actions

這里需要知道actions的含義：傳送門

 

6:編寫vuex/mutaions.js

const mutations = {
	increment : state =>{
		state.count = state.count+5
	},
	decrement : state =>{
		state.count = state.count-3
	},
}

export default mutations

這里需要知道mutaions的含義：傳送門

 

7:編寫vuex/getters.js

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

export default getters

這里需要知道getters的含義：傳送門

 

8:編寫main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

　　

npm run dev后，啟動項目:

 

二：直接寫在一個文件中的方式：

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

Vue.use(Vuex)

const state = {
    candidateEduList: [],
    relationList: []
}
const mutations = {
    // 設置教育列表
    setEduList(state, resData) {
        state.candidateEduList = resData
    },
    // 設置關系列表
    setRelationList(state, resData) {
        state.relationList = resData
    }
}
 
const store = new Vuex.Store({
    state,
    mutations
})
 
export default {
    store
}

1、組件中直接commit

this.$store.store.commit('setLogin')

帶參數的方式:

this.$store.store.commit('setLogin',data)

　　

 2、組價中讀取

this.$store.store.state