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就會改變。這也是官方推薦的寫法

1. 直接在頁面調用顯示

因為一個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'      

1. 具體的寫法

   三種寫法請參考代碼

computed: mapState({
    // 箭頭函數可使代碼更簡練
    name: state => state.name,
    // 傳字元串參數 'age' 等同于 `state => state.age`
    age: 'age',
    // 為了能夠使用 `this` 擷取局部狀态，必須使用正常函數
    countPlusLocalState (state) {
      return state.name+ data中定義的變量
    }
  })      

1. 注意

當映射的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給 mapState 傳一個字元串數組。

注意這裡方括号，最外層的{}可以省略

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

因為mapState傳回一個對象，是以可以使用展開運算符

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