Vuex之state和getters

store 常規使用方式

直接在 new Vuex.store 選項中去寫，不太好，常規方式是

建立檔案

建立 client/store/state/

建立 client/store/state/state.js

建立 client/store/mutations/

建立 client/store/state/mutations.js

分模組寫

// state.js 資料
export default {
  count: 0
}
複製程式碼

// mutations.js 操作
export default {
  updateCount (state, num) {
    state.count = num
  }
}
複製程式碼

主入口引入

// store.js
import Vuex from 'vuex'

import defaultState from './state/state'
import mutations from './mutations/mutations'

export default () => {
  return new Vuex.Store({
    state: defaultState, // 這裡因為有服務端渲染，渲染時，會有部分資料傳到客戶端，這是會有覆蓋資料的操作，所以 defaultState 只是預設狀態，不是真正的狀態。
    mutations // es6特性，簡寫;操作都是相通的，不需要 default 標明
  })
}
複製程式碼

getters

getters 和 元件的 computed 類似，方便直接生成一些可以直接用的資料。當組裝的資料要在多個頁面使用時，就可以使用 getters 來做。

建立資料夾及檔案

建立 client/store/getters/

建立 client/store/state/getters.js

宣告 getters

// getters.js
export default {
  fullName (state) {
    return `${state.firstName} ${state.lastName}`
  }
}
複製程式碼

引入 getters

// store.js
import Vuex from 'vuex'

import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters' // 這裡

export default () => {
  return new Vuex.Store({
    state: defaultState, 
    mutations, 
    getters // 這裡
  })
}
複製程式碼

使用 getters

// app.vue
<template>
  <div id="app">
    <p>{{fullName}}</p>
  </div>
</template>

<script>
export default {
  computed: {
    fullName () {
      return this.$store.getters.fullName
    }
  }
}
</script>
複製程式碼

簡寫幫助方法

babel 預設不支援 ... 解構語法的，未定稿的語法

安裝 babel-preset-stage-1

npm i babel-preset-stage-1 -D

級別最高的一種。

// .babelrc
{
  "presets": [
    "env",
    "stage-1" // 新增配置
  ],
  "plugins": [
    "transform-vue-jsx",
    "syntax-dynamic-import"
  ]
}
複製程式碼

mapState 簡寫

// app.vue
<template>
  <div id="app">
    <p>{{fullName}} {{count}}</p>
  </div>
</template>

<script>
import {
  mapState
  // mapGetters
} from 'vuex'

export default {
  computed: {
    ...mapState(['count']), // 同名直接用陣列
    fullName () {
      return this.$store.getters.fullName
    }
  }
}
</script>
複製程式碼

不同名的話，用物件

...mapState({
      counter: 'count'
    }),
複製程式碼

或者用函式

...mapState({
      counter: (state) => state.count
    }),
複製程式碼

mapGetters 簡寫

與 mapState 類似

...mapGetters(['fullName'])
複製程式碼