vue 狀態管理（三）

vue 狀態管理（三）

咱們修改 state，而後刷新瀏覽器，狀態又變化原來的了，由於 state 是存在內存中的，爲了點擊刷新，狀態不回到原來的，就須要 Vuex 提供的插件功能，固然插件還能實現其餘複雜的功能。

插件

Vuex 的 store 接受 plugins 選項，這個選項暴露出每次 mutation 的鉤子。Vuex 插件就是一個函數，它接收 store 做爲惟一參數：

const myPlugin = store => {
  // 當 store 初始化後調用
  store.subscribe((mutation, state) => {
    // 每次 mutation 以後調用
    // mutation 的格式爲 { type, payload }
  })
}
複製代碼

使用插件：

const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})
複製代碼

使用插件本地 state 持久化。

//localstore.js
export default store => {
	// 當 store 初始化後調用
	console.log('store 初始化', JSON.stringify(store.state, '', 2))
	// 已經初始化 
	// 不能 store.state = '' 直接賦值方式改變 state
	if (localStorage.getItem('state')) store.replaceState(JSON.parse(localStorage.state))
	store.subscribe((mutation, state) => {
		// 每次 mutation 以後調用
		localStorage.state = ''
		try {
			localStorage.setItem('state', JSON.stringify(state))
		} catch (error) {
			console.log('持久化遇到錯誤')
			console.error(error)
		}
		console.log('mutation', mutation)
		// mutation 的格式爲 { type, payload }
	})
}
複製代碼

修改 store

// 引入插件
import { localStore } from './plugins'
Vue.use(Vuex)
export default new Vuex.Store({
	state,
	getters,
	mutations,
	actions,
	modules: {
		user
	},
	plugins: [localStore]
})
複製代碼

啓用插件後，調用 commit 更新 state 後，會更新本地存儲，即便實現瀏覽器，值也不會變。

處理表單

在學習 mutations 時，咱們使用表單的值更新state，咱們這樣寫

<input type="text" name="age" id="age" v-model="age" placeholder="請輸入年紀" />
		<button @click="changeAge">修改年紀</button>
		<p>年紀:{{this.$store.state.age}}</p>
		<input type="text" v-model="lastName" placeholder="請輸入姓氏" @input="changeLastName" />
複製代碼

import { mapMutations } from 'vuex'
	export default {
		name: 'Store',
		data() {
			return {
				age: '',
				lastName: ""
			}
		},
		methods: {
			//方法名和 muations 相同
			...mapMutations(['CHANGE_LAST_NAME', 'CHANGE_AGE']),
			// 將 `this.changeAge2()` 映射爲 `this.$store.commit('CHANGE_AGE')`
			...mapMutations({ changeAgeAlias: 'CHANGE_AGE' }),
			changeAge2() {
				this.changeAgeAlias({ age: Number.parseInt(this.age) })
			},
			changeLastName() {
				// this.$store.commit('CHANGE_LAST_NAME', this.lastName)
				this.CHANGE_LAST_NAME(this.lastName)
			},
		}
	}
複製代碼

以上方式都是在方法中提獲取表單的輸入值，須要再data裏生屬性。其實咱們能夠在計算屬性中使用setter、getter中實現，充分利用 v-model 雙向綁定的特性來簡化了代碼。

<template>
	<div class="store">
		<p v-text="this.$store.getters.fullName"></p>
		<input type="text" v-model="lastName" placeholder="請輸入姓氏" @input="changeLastName" />
</template>
<script> export default { name: 'Store', computed: { lastName: { get() { return this.$store.state.lastName }, set(newLastName) { this.$store.commit('CHANGE_LAST_NAME', newLastName) } } } } </script>
複製代碼