vue中高级应用

vuex中高级应用

serverInLocal.js 文件

export default store => {
if (localStorage.state) store.replaceState(JSON.parse(localStorage.state))
store.subscribe((mutation, state) => {
	localStorage.state = JSON.stringify(state) // 存储一个store数据，当页面刷新后，重新将此对象赋值给当前store，能保持store是刷新前的状态
} )

store 中 index.js 文件

import user from './modules/user'
import serverInLocal from './serverInLocal.js'
export default new Vuex.Store({
	strict: process.env.NODE_ENV === 'development' // 严格模式下，如果直接用赋值的形式修改store中的值，虽然可以修改成功，但是控制台会报错
	state,
	getter,
	mutations,
	actions,
	modules: {
		user
	},
	pulgins: [serverInLocal ]
})

让vuex中的值实现双向数据绑定

<template>
	<input v-model="stateValue"/>
</template>
<script>
	import (mapMutations, mapActions) from 'vuex'
	...
	computed: {
		...mapMutations(['SET_STATE_VALUE']),
		stateValue: {
			get: function() {
				return this.$store.state.stateValue
			}
			set: function(value) {
				this.SET_STATE_VALUE(value)
			}
		}
	}
</script>

const state = {
	stateValue : ''
}
const mutations = {
	SET_STATE_VALUE: function(state, value) {
		this.stateValue = value
	}
}

实现class动态绑定

<template>
	<Icon :class="triggerClasses" @click.native="handleCollapsed" type="md-menu" :size="32"/>
	在icon组件中没有click事件，这里用.native修饰符将事件绑定到这个组件的最外层div上
</template>
computed: {
    triggerClasses () {
      return [
        'trigger-icon',
        this.collapsed ? 'rotate' : '' // 注意这里的代码，在style中怎么写
      ]
    },
    ...mapState({
      tabList: state => state.tabNav.tabList,
      routers: state => state.router.routers.filter(item => {
        return item.path !== '*' && item.name !== 'login'
      })
    })
  }

<style>
	.trigger-icon{
      cursor: pointer;
      transition: transform .3s ease;
      &.rotate{ // 注意这里和computed中对应
        transform: rotateZ(-90deg);
        transition: transform .3s ease;
      }
    }
</style>