nuxt中使用Vuex

問題

如何在nuxt中使用Vuex?
以官網例子, 模塊方式參考——計數器為例子

目錄結構

js模塊寫法

// user.js
// state為一個函式, 注意箭頭函式寫法
const state = () => ({
  counter: 6
})

// mutations為一個物件
const mutations = {
  increment(state) {
    state.counter++
  },
  decrement(state) {
    state.counter--
  }
}
const actions = {

}
const getters = {

}
export default {
  namespace: true,	// 命名空間
  state,
  mutations,
  actions,
  getters
}

如果沒有namespace，那么默認地每一個xxx.vue檔案都會與store檔案夾下的xxx.js相對應

vue寫法

直接獲取

直接從user.js模塊中獲取state

<!-- user.vue -->
<div class="display-1">{{this.$store.state.user.count}}</div>

computed獲取

用computed監聽Vuex中state的變化, 及時渲染到界面上，如果在data中接收Vuex的state, 那么有可能監聽不到state的變化^[1], 一句話就是用computed接受Vuex的狀態

computed介紹:

1. 用于變數或方法的復雜邏輯, 如vue官網的反轉字串例子
2. 相較于methods, computed有快取機制, 相同的結果不會重復計算, 而methods中的方法是每次呼叫都會計算

// 從vuex中引入mapState
import { mapState } from 'vuex'

<!-- user.vue html部分 -->
<div class="display-1">{{counter}}</div>
<div class="display-1">{{tag}}</div>

// user.vue computed部分 第一種寫法
computed:mapState('user', {
   counter: state => state.counter // 注意寫法，沒中括號
}),

// user.vue computed部分 第二種寫法, 普通函式
computed:mapState('user', {
    counter: function(state) {
    	return state.counter
    }
}),

// user.vue computed部分 第三種寫法
computed:mapState("user", ['counter'])

// user.vue computed部分 第四種寫法
// 方法與mapState共存
computed:{
    tag(){	// 方法
        return 'something'
    },
    ...mapState('user', {
	counter: function(state) {
    	    return state.counter
    	}
    }),
}

mapState({}|[])函式, 專門用來接收來自Vuex中的state, 接受一個物件或者一個陣列,

...mapState()介紹:

因為mapState()不能直接寫進computed物件中, 而computed的方法必須寫進computed物件中, 所以為了讓方法和state共存引入... 即...mapState()寫法誕生

...為物件擴展符, 加上之后就可以在computed這個物件中與其他方法共存，沒有方法時可以直接上第一、二種寫法

觸發mutations

// 觸發mutations方式
this.$store.commit("mutationName", [parameter])

methods: {
  increment() {
    this.$store.commit('user/increment')
  },
  decrement() {
    this.$store.commit('user/decrement')
  }
},

代碼

index.vue中參考user.js模塊

// index.vue
<template>
  <div id="index">
    <div class="display-1">
      <b-icon icon="person"></b-icon>
      <b-icon icon="person-fill"></b-icon>
      <b-icon icon="triangle"></b-icon>
    </div>
    <div class="display-1">{{counter}}</div>
    <div class="display-1">{{tag}}</div>
    <div>
      <b-button variant="outline-success" @click="increment">增加</b-button>
      <b-button variant="outline-success" @click="decrement">減少</b-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  // 初始化時觸發mutations
  fetch({ store }) {
    store.commit('user/increment') 
  },
  mounted() {},
  data() {
    return {}
  },
  methods: {
    increment() {
      this.$store.commit('user/increment')
    },
    decrement() {
      this.$store.commit('user/decrement')
    }
  },
  computed: {
      tag(){
          return 'something'
      },
      ...mapState('user', {
      	  counter: state => state.counter
      })
  },
  components: {}
}
</script>

<style scoped>
#index {
  min-height: 100%;
}
</style>

參考

[1]Vuex入門（2）—— state,mapState,...mapState物件展開符詳解. https://blog.csdn.net/dkr380205984/article/details/82185740

標籤：JavaScript

上一篇：JavaScript 的 物件

下一篇：vue upload 圖片轉base64、轉二進制陣列，保存編碼資料到檔案