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>

你可能感兴趣的:(vue)