vuex-state-mapState辅助函数

vuex定义:

vuex 是vue的状态管理，为了更方便的实现多个组件之间的共享状态

安装:

npm install vuex --save

使用：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)  //让vue去使用vuex，将vuex的方法挂载到vue实例上面

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
//在main.js里面引入js
import store from './store'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

state

就是一个对象里面包含了全部的应用层级状态(我理解为里面就是存放的数据)，可以通过（$store.state）来拿取数据

当我们重vuex里面获取来了的数据如果直接赋值给data，我们后面在更改视图是不会更改的
例如：当组件加载的时候将this.$store.state.count的值赋给了count，当我们更改是更改的vuex里面的值并不是data里面的值

<template>
  <div class="home">
    <div>{{count}}</div>
    <button @click="$store.state.count ++">click</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      count: this.$store.state.count
    }
  }
}
</script>

所以我们就会想到用计算属性（computed）

<template>
  <div class="home">
    <div>{{count}}</div>
    <button @click="$store.state.count ++">click</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // count: this.$store.state.count
    }
  },
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
</script>

但是我们使用computed又会出现一个新问题，假如我们这里要用到10值或者100个值就写100个函数，所以我们就用mapState函数来解决

mapState辅助函数

定义

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：
我们要使用mapState函数我们就要从vuex里面引入该函数，

第一种写法（不推荐）

下面这样写有问题，我们知道data的优先级大于computed所以页面会被渲染成100

<template>
  <div class="home">
    <div>{{count}}</div>
    <button @click="$store.state.count ++">click</button>
  </div>
</template>
<script>
import { mapState } from 'vuex' //引入函数
export default {
  data () {
    return {
      count: 100
    }
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

第二种写法

这里面又三种根据需求来选择

<template>
  <div class="home">
    <div>{{count}}</div>
    <div>{{countAlias}}</div>
    <div>{{countPlusLocalState}}</div>
    <button @click="$store.state.count ++">click</button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      // count: 100
    }
  },
  computed: {
    ...mapState({
      // 箭头函数可使代码更简练
      count: state => state.count,

      // 传字符串参数 'count' 等同于 `state => state.count`
      countAlias: 'count',

      // 为了能够使用 `this` 获取局部状态，必须使用常规函数
      countPlusLocalState (state) {
        return state.count + this
      }
    })
  }
}
</script>