如何在 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寫法

1. 直接獲取

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

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

2. 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>