Vuex 之state mapState ...mapState 的使用方法

state

Vuex中的state和vue中的data是是类似的。我们称state为状态，该状态存储是响应式的，挂载到组件的计算属性上，举个栗子：当state中有一条属性 number:'10' ，分别挂载到a组件和b组件上，b组件通过commit改变了number的值，那么b组件中的number也是实时改变的（响应式）。

Vuex:（store下的index.js）

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state:{
    age:18,
    name:'张三',
    str:'Hello World!',
    address:'石家庄'
  },
  mutations:{},
  actions:{},
  getters:{},
  modules:{}
})

//导出store对象
export default store;

mapState

案例：

<template>
    <ul>
      <li>{{myname}}</li>
      <li>年龄：{{age}}</li>
      <li>住址：{{myaddress}}</li>
    </ul>
</template>
<script>
import { mapState } from 'vuex'
export default {
   name: 'As',
  components:{
  },
  data(){
    return{
      province:'河北省',
    }
  },
  computed: mapState({
      myname: state => '姓名：'+state.name,              //第一种方式
      age: 'age', //也可以写成 age: state => state.age,  //第二种方式
      myaddress (state){                                //第三种方式
        return this.province + state.address
      }
  })
}
</script>

运行结果：

 

...mapState

mapState 函数返回的是一个对象。但是实际的项目开发中，还会有一些组件自身的局部的计算属性，我们将mapState 函数返回的对象与局部计算属性混合使用，就用到了对象展开运算符，也就是三个点（...)。

案例：

getStr为局部的计算属性。 

<template>
    <ul>
      <li>{{myname}}</li>
      <li>年龄：{{age}}</li>
      <li>住址：{{myaddress}}</li>
      <li>{{getStr}}</li>
    </ul>
</template>
<script>
import { mapState } from 'vuex'
export default {
   name: 'As',
  components:{
  },
  data(){
    return{
      province:'河北省',
    }
  },
  computed: {
    getStr(){
      return '我是本组件中的计算属性'
    },
    ...mapState({
      myname: state => '姓名：'+state.name,              //第一种方式
      age: 'age', //也可以写成 age: state => state.age,  //第二种方式
      myaddress (state){                                //第三种方式
        return this.province + state.address
      }
  })
  }
}
</script>

运行结果：

☼ᴇᴠᴇʀʏᴛʜɪɴɢ ᴡɪʟʟ ʙᴇ ᴏᴋ ☼ 只要来日可期，今天就值得欣喜！ ✿✿ヽ(°▽°)ノ✿