store.js
 
主要思路是
 
登录的时候把数据传到sessionStorage与state,记得传sessionStorage和取值都需要转json，否则是字符串
 
store.js存sessionStorage
 
mutations: {
    Login (state, res) {
      state.userInfo = res.data.data
      sessionStorage.setItem('userInfo', JSON.stringify(res.data.data))
    },
}
 
因为刷新时vuex会被刷新而sessionStorage不会，所以App.vue创建时检测一次sessionStorage是否为空
 
<script>
import store from '@/store'
export default {
  name: 'App',
  store,
  created () {
    // 刷新时vuex赋值
    if (sessionStorage.getItem('userInfo') !== '') {
      this.$store.commit('EventListener')
    }
  }
}
</script>
 
sessionStorage取值store.js
 
mutations{
    EventListener (state) {
      state.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    }
}

监听单个数据
 
vuex数据
 
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		memberType:0
	},
	mutations: {
	},
	actions: {
	},
	modules: {
	}
})
 
页面处理
 
data() {
	return {
	}
},
computed:{
	//计算vuex数据并返回
	stateMemberType(){
		return this.$store.state.memberType
	}
},
watch:{
	//监听vuex数据
	stateMemberType(e){
		console.log('数据发生了改变',e)
	}
},
 
深度监听数据
 
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		data:{
			name:"123",
			age:10
		}
	},
	mutations: {
	},
	actions: {
	},
	modules: {
	}
})
 
页面处理
 
data() {
	return {
	}
},
computed:{
	//计算vuex数据并返回
	stateMemberType(){
		return this.$store.state.data
	}
},
watch:{
	//监听vuex数据
	stateMemberType: {
		immediate: true,
		deep:true,
		handler: function (newval) {
			console.log('数据发生了改变',newval)
		},
	}
},

//将vuex中的数据存贮以防刷新丢失
setStore (){
  if (sessionStorage.getItem("store") ) {
  //replaceState(state: Object):替换 store 的根状态，仅用状态合并或时光旅行调试
  //Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。
  	this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
  }
 //在页面刷新时将vuex里的信息保存到sessionStorage里
 window.addEventListener("beforeunload",()=>{
 	sessionStorage.setItem("store",JSON.stringify(this.$store.state))
 })
}
 
在methods中定义方法,在mounted中调用.
 通过将store中的数据存贮在sessionStorage中保留数据

vue 只能承担视图层的主要类容
 
vuex 数据框架  大量数据  
 
 
1.安装
 
npm install vuex --save
 
1.1在main.js中引入：import store from './store/store'
 
1.2注册使用store
 
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
 
2.创建store.js  内容如下：
 
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    city: '北京'
  }
})
 
3.在.vue视图页面使用‘北京’：{{this.$store.state.city}}
 
4.在.vue页面中事件触发并传参city
 
 methods: {
    handlecityclick: function (city) {
      this.$store.dispatch('changecity', city)
    }
  }
 
5.在.js页面感知到changecity事件的触发，然后去调用change事情，在事件中对city做改变
 
export default new Vuex.Store({
  state: {
    city: '北京'
  },
  actions: {
    changecity: function (ci, city) {
      ci.commit('change', city)
    }
  },
  mutations: {
    change: function (state, city) {
      state.city = city
    }
  }
})
 
5.1可以省略掉actions对象中的事件，直接进入mutations去改变
 
.vue
 
 methods: {
    handlecityclick: function (city) {
      this.$store.commit('changecity', city)
    }
  }
 
.js 
 
export default new Vuex.Store({
  state: {
    city: '北京'
  },
  mutations: {
    changecity: function (s, city) {
      s.city = city
    }
  }
})