关于vuex使用

Vuex概述

Vuex是实现组件全局状态(数据)管理的一种机制，可以方便地实现组件之间数据的共享。
（一般情况下，只有组件之间共享的数据，才有必要存储到Vuex中）

例子:登录成功后,显示’‘欢迎xxx用户登录’’ ,常见的储存方式有sessionStorage和localStorage(博客里面有详详细使用方法)

使用Vuex管理数据的好处：
1、能够在vuex中集中管理共享的数据，易于开发和后期维护；
2、能够高效地实现组件之间的数据共享，提高开发效率；
3、存储在vuex的数据都是响应式的，能够实时保持数据与页面的同步；

Vuex的基本使用
1.1方式1：为每一个变量定义一个修改函数斜体样式**

解释:this.store,commit中setUser : mutations中的方法,
‘xxx’: setUser()方法中的value,修改的数据

代码:(copy)
// state 区域，相当于定义变量
export const state = () => ({
user: null
})

//数据修改区域，用于改变变量的值
export const mutations = {
setUser(state , value) {
state.user = value
}
}

//修改数据 this.$store.commit(‘setUser’, ‘xxx’)

1.2通用方式

解释:
将value替换成一个对象obi, obj里面有 {‘key’:‘user’,‘value’:‘xxx’} ,key表示state区域的变量 ,value 指的是
更改state区域中数据的值, (就是上面1.1中的value),

误区:
state[obj.key] 不能写成state.obj.key,state.obj.key 的意思是state里面的obj中的key的值, [obj.key]是一个变量,state[obj.key]是我们能得到这个变量的值 ,就是state[user]

代码:(copy)
// state 区域，相当于定义变量
export const state = () => ({
user: null
})

//数据修改区域，用于改变变量的值
export const mutations = {
setData(state , obj ) { //通用方法，可以修改任意变量
state[obj.key] = obj.value
}
}

//修改数据： this.$store.commit(‘setData’, {‘key’:‘user’,‘value’:‘xxx’} )