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'])
複製程式碼