Vuex 存放狀態的State

在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions

State內負責存放初始資料，裡面可以放任何東西：物件、陣列、數值、字串...etc 只要我們後續Vuex有用到，就應該先在State宣告其存在，就算是空值、空字串、空陣列也沒關係。

因為一但在之後的Mutations突然寫了一個未先宣告的State資料，Vuex不會當場動態產生這個變數資料出來，就會報錯。 (想像成寫程式，會用到什麼都要在編輯器最上方先宣告變數存在)

但還是有辦法的，如果要臨時在Mutations新建一個State資料，要這樣寫

Vue.set(state,’資料名稱’,’ ‘值');

要讀取Vuex的值，我們會在(.Vue)組件的</script>的computed寫一些計算回傳的方法去讀值

export default {
 computed:{  //<————————寫在這裡
 count(){   //<————————要讀取的Vuex對應值的方法
 return this.$store.state.count;    //<————————每次都要寫return xxxxx
 }
 },
 methods:{
 addCount(){
 this.$store.commit('addCount’)
 }
 }
}

但是這樣，要讀取的State一多，要寫在computed的方法也會變多，所以幸Vuex有提供一些方法，例如mapState 我們可以在(.Vue)組件的</script>內引入Vuex的mapState方法


import { mapState } from 'vuex'

export default {
 computed:{ 
    //...略
 },
 methods:{

 //...略
 }
}

引入mapState後，在computed有幾種mapState的用法 1.陣列：原本

computed:{ 
 count(){ 
 return this.$store.state.count; 
 }
 其他對應vuex值(){
 return this.$store.state.對應vuex值; 
 }
}

改成mapState( )，傳入陣列當參數要這樣寫

computed:mapState([
 'count',
 '其他對應vuex值',
 '其他對應vuex值’,
 '其他對應vuex值',
])

mapState，會透過陣列裡的字串去vuex裡尋找值，並把它引入vue組件並轉換成computed計算方法

不過這樣寫，整個computed的值就被mapState( )佔走了，如果computed計算屬性，還有要寫其他方法呢？總不可能computed方法寫了mapState就不能設定其他計算方法了吧？這個時候就要用...運算子

computed:{
 aFunction1(){
 // 略...
 },
 aFunction2(){
 // 略...
 },

 ...mapState([
 'count',
 '其他對應vuex值',
 '其他對應vuex值’,
 '其他對應vuex值',
 ]) 
}

2.物件: mapState也可以傳入物件當參數，通常用在想要額外設定物件屬性，把原本的'其他對應vuex值’變成物件的屬性值，物件的屬性我們就可以自己去名字。

例如：

computed:{
 aFunction1(){
 // 略...
 },
 aFunction2(){
 // 略...
 },
 ...mapState({
 myCount:'count',
 自己取名的屬性：'其他對應vuex值',
 自己取名的屬性：'其他對應vuex值',
})

那原本寫在HTML的{{ count }}，因為變成值，就要以屬性來呼喚它，變成這樣寫

原本：

<h2>{{ count }}</h2>

變成物件屬性的值，所以HTML的{{ }}內要放我們自己取的物件屬性名

<h2>{{ myCount }}</h2>

因為JS物件可以放函式(方法)，所以還可以改成

computed:{
 aFunction1(){
 // 略...
 },
 aFunction2(){
 // 略...
 },
 ...mapState({
 myCount:'count’,

 myVal: state => state.count
 myList(state){
 return this.xxx + state.count
 },
})

所以HTML的{{ }}內也是放上方法名稱

<h2>{{ myVal }}</h2>
<h2>{{ myList }}</h2>

這麼做的目的就和computed計算屬性一樣，應該說本來就是computed計算屬性的使用目的，就是先計算再回傳直到網頁上我們可以先透過computed方法操作Vuex值在回傳到網頁上

想用箭頭函式或一般函式都可以，只是要注意用了箭頭函式就不能用this了！

Vuex 存放狀態的State

Written by:

SimonAllen