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'])
复制代码