vue state management (c)

vue state management (c)

We modify the state, then refresh the browser, and change the original state, because the state is stored in memory, in order to hit refresh state do not return to the original plug-in functionality, you need to Vuex provided, of course, but also to achieve other complex plug-ins function.

Plug

Vuex the store accepts plugins option, which exposed each mutation hooks. Vuex plug-in is a function that receives store as the only parameter:

const myPlugin = store => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
  })
}
复制代码

Use plug-ins:

const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})
复制代码

Use plug-ins local state persistence.

//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 }
	})
}
复制代码

Modify store

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

After enabled plugin, call commit update state, will update the local store, even if the browser implementation, the value will not change.

Dealing with Forms

When studying mutations, we use a form of value is updated state, we write

		<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)
			},
		}
	}
复制代码

Gets the embodiment mentioned above are in the process input values, where students need to attribute data. In fact, we can use in the calculation of property setter, getterto achieve full use of v-modelthe characteristics of two-way binding to simplify the code.

<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>
复制代码

Reproduced in: https: //juejin.im/post/5d05d3d651882546dd100c73