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