Vue02 state与mapState

！！！ 这个例子可以先忽略mutations

初始化一个state

const store = new Vuex.Store({
    state: {
        name: "old name",
        age: 18,
        sex: "女",
    },
    mutations: {
        changName(state) {
            state.name = "newName"
        },
        addAge(state) {
            state.age += 1
        },
        changSex(state) {
            state.sex = state.age + "男"
        }
    }
})

在组件中使用

1. 直接赋值给data中的变量

这种情况会导致name直接仅仅接受了一个值，即使点击了我要改名，name也不会改变。

2 使用computed进行接收

computed会进行监听，所以只要this.$store.state.age改变，age就会改变。这也是官方推荐的写法

23. 直接在页面调用显示

因为一个store是一个vue实例，所以数据变了，页面数据也会跟着变

<template>
  <div>
    <button @click="changeName">我要改名</button>
    <button @click="addAge">我长大啦</button>
    <button @click="changeName">我要改名</button>
    <p>{{this.$store.state.sex}}</p>
    <p>{{name}}</p>
    <p>{{age}}</p>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      name: this.$store.state.name
    };
  },
  computed: {
    age() {
      return this.$store.state.age;
    }
  },
   methods: {
    changeName() {
      this.$store.commit("changName");
    },
    addAge() {
      this.$store.commit("addAge");
    },
    changSex() {
      this.$store.commit("changSex");
    }
  }
};
</script>

mapState 辅助函数

在上面，我们推荐把值放在computed中，这样会导致一个问题，我们这里有三个变量，如果都按照上面的写法，会显得代码特别繁杂。
所以vuex提供了一个辅助函数mapState.这个函数会返回一个对象

1. 先在组件中引入mapstate

import { mapState } from 'vuex'

2. 具体的写法
   三种写法请参考代码

computed: mapState({
    // 箭头函数可使代码更简练
    name: state => state.name,
    // 传字符串参数 'age' 等同于 `state => state.age`
    age: 'age',
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.name+ data中定义的变量
    }
  })

3. 注意

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
注意这里方括号，最外层的{}可以省略

computed: {mapState([
    // 映射 this.count 为 store.state.count
    "name",
    "age",
    "sex"
  ]),}

因为mapState返回一个对象，所以可以使用展开运算符

 computed: {
    ...mapState({
      name: "name",
      age: "age",
      sex: "sex"
    })
  },