vue 状态管理（三） | Jack Chou's blog

我们修改 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，我们这样写

html

		<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 双向绑定的特性来简化了代码。

html

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

插件 #

处理表单 #

插件

处理表单