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'])
