Vue-admin工做整理（九）： 狀態管理Vuex-state和getters

前提：經過項目結構我的設置建立的項目

store文件下actions.js、mutations.js、state.js都是根級別的狀態管理，引用入口是經過index.js來實現,整個Vuex處理邏輯爲：

1、state

• 實現方式1:訪問根(state.js)狀態的方式

在state.js定義的值，能夠在任何組件中使用，其餘組件使用計算屬性（computed）來得到該值，而後經過store的實例來讀取：this.$store.state.appName,具體實現：

一、state.js:

const state = {
  appName: 'Robin'
}
export default state

二、store.vue

<template>
  <div>
    <a-input v-model="inputValue"/>
    <p>{{ inputValue }}</p>
    <p>appName: {{ appName }}</p>
    <a-show :content = "inputValue"/>
  </div>
</template>
<script>
import AInput from '_c/AInput.vue'
import AShow from '_c/AShow.vue'
export default {
  name: 'store',
  data () {
    return {
      inputValue: ''
    }
  },
  components: {
    AInput,
    AShow
  },
  computed: {
    appName () {
　　　　// 實現方式1:訪問根狀態的方式 return this.$store.state.appName //注意路徑，必定要是：store下的state模塊實例的appName值
    }
  }
}
</script>

結果：

• 實現方式2:模塊裏定義的state(model->user.js->state)的值訪問

　　思路：組件中經過 this.$store.state.user.userName來獲取，注意：必定要有模塊名(user),具體實現：

<template>
  <div>
    <a-input v-model="inputValue"/>
    <p>{{ inputValue }}</p>
    <p>appName: {{ appName }}</p>
    <p>userName: {{ userName }}</p>
    <a-show :content = "inputValue"/>
  </div>
</template>
<script>
import AInput from '_c/AInput.vue'
import AShow from '_c/AShow.vue'
export default {
  name: 'store',
  data () {
    return {
      inputValue: ''
    }
  },
  components: {
    AInput,
    AShow
  },
  computed: {
    appName () {
      return this.$store.state.appName
    },
    userName () {
      return this.$store.state.user.userName
    }
  }
}
</script>

結果：

• 實現方式3:經過Vuex提供的工具函數：mapState

　　a、數組方式

<template>
  <div>
    <a-input v-model="inputValue"/>
    <p>{{ inputValue }}</p>
    <p>appName: {{ appName }}</p>
    <p>userName: {{ userName }}</p>
    <a-show :content = "inputValue"/>
  </div>
</template>
<script>
import AInput from '_c/AInput.vue'
import AShow from '_c/AShow.vue'
import { mapState } from 'vuex'
export default {
  name: 'store',
  data () {
    return {
      inputValue: ''
    }
  },
  components: {
    AInput,
    AShow
  },
  computed: {
    ...mapState([ // ...爲es6裏面的展開操做符，它會展開一個對象，mapState最後會返回一個對象
      'appName',
      'userName'
    ])
  }
}
</script>

　　b、對象方式

<template>
  <div>
    <a-input v-model="inputValue"/>
    <p>{{ inputValue }}</p>
    <p>appName: {{ appName }}</p>
    <p>userName: {{ userName }}</p>
    <a-show :content = "inputValue"/>
  </div>
</template>
<script>
import AInput from '_c/AInput.vue'
import AShow from '_c/AShow.vue'
import { mapState } from 'vuex'
export default {
  name: 'store',
  data () {
    return {
      inputValue: ''
    }
  },
  components: {
    AInput,
    AShow
  },
  computed: {
    ...mapState({
      appName: state => state.appName,    // state爲根級的state.js對象
      userName: state => state.user.userName // state爲根級的state.js對象
    }
    )
  }
}
</script>

• 實現方式4：若是模塊中使用了命名空間，那麼state值該怎麼取？(使用命名空間，會讓咱們的模塊更加密閉，不受外界的干擾)

　　思路：可使用Vuex提供的另外一種方法：createNamespacedHelpers,經過它，來定義 mapState ，該方法須要傳入一個命名空間的模塊名，好比咱們是在用user.js增長命名空間：createNamespacedHelpers（'user'）,這個時候 mapState 就包含了user這個模塊名稱了，注意書寫方式：

import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('user')

使用的時候經過：...mapState的方式，以對象形式取值了：

<template>
  <div>
    <a-input v-model="inputValue"/>
    <p>{{ inputValue }}</p>
    <p>appName: {{ appName }}</p>
    <p>userName: {{ userName }}</p>
    <a-show :content = "inputValue"/>
  </div>
</template>
<script>
import AInput from '_c/AInput.vue'
import AShow from '_c/AShow.vue'
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('user')
export default {
  name: 'store',
  data () {
    return {
      inputValue: ''
    }
  },
  components: {
    AInput,
    AShow
  },
  computed: {
    ...mapState({
      userName: state => state.userName
    }
    )
  }
}
</script>

2、getters

至關於一個組件裏面的計算屬性，能夠經過組件裏的一個值通過計算處理，來返回一個新的值，依賴的值若是發生了變化，那麼使用了這個值的getters屬性也會發生相應的變化，也會更新

　　一、最基礎非getters方法：當inputValue改變的時候相應的計算屬性也會去從新計算，若是inputValue的data值不變，計算屬性是不會進行計算的

<template>
  <div>
    <a-input v-model="inputValue"/>
    <p>{{ inputValue }} -> lastLetter is {{ imputValueLastLetter }}</p>
    <p>appName: {{ appName }}</p>
    <p>userName: {{ userName }}</p>
    <a-show :content = "inputValue"/>
  </div>
</template>
<script>
import AInput from '_c/AInput.vue'
import AShow from '_c/AShow.vue'
import { mapState } from 'vuex'
export default {
  name: 'store',
  data () {
    return {
      inputValue: ''
    }
  },
  components: {
    AInput,
    AShow
  },
  computed: {
    ...mapState({
      appName: state => state.appName,
      userName: state => state.user.userName
    }),
    // 拿inputValue的最後一個字母
    imputValueLastLetter () {
      return this.inputValue.substr(-1, 1)
    }
  }
}
</script>

　　二、Vuex裏的getters: store->getters.js(根級別的getters)

　　　　例如：想展現一個值，這個值是依賴於state.js裏的appName來計算的，須要在getter.js建立一個屬性：appNameWithVersion。 屬性值是一個函數，函數裏面要有一個參數:state，這個state就是當前Vuex實例裏的同級的state，而後經過

const getters = {
  appNameWithVersion: (state) => {
    return state.appName + 'V 2.0.0'
  }
}

export default getters

對 appNameWithVersion 進行處理，值獲取到後在store.vue中，經過

appNameWithVersion () {
      return this.$store.getters.appNameWithVersion
    }

進行傳值

 

總體store代碼：

<template>
  <div>
    <a-input v-model="inputValue"/>
    <p>{{ inputValue }} -> lastLetter is {{ imputValueLastLetter }}</p>
    <p>appName: {{ appName }} -> appNameWithVersion is {{ appNameWithVersion }}</p>
    <p>userName: {{ userName }}</p>
    <a-show :content = "inputValue"/>
  </div>
</template>
<script>
import AInput from '_c/AInput.vue'
import AShow from '_c/AShow.vue'
import { mapState } from 'vuex'
export default {
  name: 'store',
  data () {
    return {
      inputValue: ''
    }
  },
  components: {
    AInput,
    AShow
  },
  computed: {
    ...mapState({
      appName: state => state.appName,
      userName: state => state.user.userName
    }),
    // 經過getters拿inputValue的最後一個字母
    imputValueLastLetter () {
      return this.inputValue.substr(-1, 1)
    },
    appNameWithVersion () {
      return this.$store.getters.appNameWithVersion
    }
  }
}
</script>

 　　三、經過Vuex提供的工具方法，來獲取getter

　　　　a、數組形式：

import { mapState, mapGetters } from 'vuex'

...mapGetters([
      'appNameWithVersion'
    ])

　　　　b、如何取模塊中定義的getter呢：

　　　　　　(1)、user.js：

const state = {
  userName: 'Cristin'
}

// 取userName的第一個字母
const getters = {
  firstLetter: (state) => {
    return state.userName.substr(0, 1)
  }
}
const mutations = {
  //
}

const actions = {
  //
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

　　　　　　（2）、store.vue：

<template>
  <div>
    <a-input v-model="inputValue"/>
    <p>{{ inputValue }} -> lastLetter is {{ imputValueLastLetter }}</p>
    <p>appName: {{ appName }} -> appNameWithVersion is {{ appNameWithVersion }}</p>
    <p>userName: {{ userName }} -> firstLetter is {{ firstLetter }}</p>
    <a-show :content = "inputValue"/>
  </div>
</template>
<script>
import AInput from '_c/AInput.vue'
import AShow from '_c/AShow.vue'
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'store',
  data () {
    return {
      inputValue: ''
    }
  },
  components: {
    AInput,
    AShow
  },
  computed: {
    ...mapState({
      appName: state => state.appName,
      userName: state => state.user.userName
    }),
    ...mapGetters([
      'appNameWithVersion'
    ]),
    ...mapGetters('user', [
      'firstLetter'
    ])
  }
}
</script>

呈現：