VueX深度解析：组件间数据共享与状态管理-优快云博客

本文链接：https://blog.youkuaiyun.com/pauline_/article/details/112998308

组件之间共享数据的方式

父向子传值: v-bind 属性绑定

子向父传值: v-on 事件绑定

兄弟组件之间共享数据: EventBus

$on 接收数据的那个组件

$emit 发送数据的那个组件

VueX

Vuex是实现组件全局状态(数据)管理的一种机制 , 可以方便的实现组件之间的共享

好处:

能够在vuex中集中管理共享的数据 , 易于开发和后期维护
能够高效的实现组件之间的数据共享 , 提高开发效率
存储在vuex中的数据是响应式的, 能够实时保持数据与页面的同步

核心概念

State提供唯一的公共数据源所有共享的数据都要统一放到Store的State中进行存储

	//创建store数据源 提供唯一公共数据
	const store = new Vuex.store({
    state:{ count:0 }
  })

组件中访问State中数据的第一种方式:

{{ this.$store.state.全局数据名称 }}

这里可以省略掉this

第二种方式:

	//1.从vuex中按需导入 mapstate函数
	import { mapstate } from 'vuex'

通过刚才导入的mapState函数将当前组件需要的全局数据映射为当前组件的computed计算属性

//2.将全局数据 映射为当前组件的计算属性
computed:{
  ...mapstate({'count'})
}

这里的使用方式直接{{count}}就可以了

Mutation

Mutation用于变更Store中的数据

只能通过Mutation变更Store数据不可以直接操作Store中的数据
通过这种方式虽然操作起来稍微繁琐一些但是可以集中监控所有数据的变化

//定义 Mutation
const store = new Vuex.store({
  state:{
    count:0
  },
  mutations:{
    add(state){
      //变更状态
      state.count++
    }
  }
})

//触发Mutation
methods:{
  handle1(){
    //触发Mutations的第一种方式
    this.$store.commit('add')
  }
}

可以在触发mutations时传递参数

//定义Mutation
const store = new Vuex.store({
  state:{
    count:0
  },
  mutations:{
    addN(state,step){
      //变更状态
      state..count += step
    }
  }
})

//触发Mutation
methods:{
  handle2(){
    //在调用commit 函数
    //触发mutations时携带参数
    this.$store.commit('addN',3)
  }
}

触发mutations的第二种方式:

//1.从vuex中按需导入mapMutations函数
import { mapMutations } from 'vuex'

通过刚才导入的mapMutations 函数将需要的mutations函数映射为当前组件的methods方法:

//2,将指定的mutations函数 映射为当前组件的methods函数
methods:{
  ...mapMutations(['add','addN'])
}

Action

不要在Mutations函数中执行异步操作

Action 用于处理异步操作

//定义Action
const store = new Vuex.store({
  //...省略号其他代码
  mutations:{
    add(state){
      state.count++
    }
  },
     actions: {
      addAsync (context) {
        setTimeout(() => {
          context.commit('add')
        }, 1000)
      }
    }
})

//触发Action
methods:{
  handle(){
    //触发actions的第一种方式
    this.$store.dispatch('addAsync ')
  }
}

触发actions异步任务时携带参数:

//定义Action
const store = new Vuex.store({
  //...省略其他代码
  mutations:{
    addN(state,step){
      state.count += step
    }
  },
  actions:{
    addNAsync(context,step){
      setTimeOut( () => { 
      	context.commit('addN',step)
      },1000 )
    }
  }
})

//触发Action
methods:{
  handle(){
    //在调用dispatch函数
    //触发actions时携带参数
    this.$store.dispatch('addN',5)
  }
}

this.$store.dispatch是触发actions的第一种方式

第二种方式:通过刚才导入的mapActions函数将需要的actions函数映射为当前组件的methods方法

//1.从vuex中按需导入mapAction函数
import { mapActions } form 'vuex'

通过刚才导入的mapActions函数将需要的actions函数映射为当前的组件的methods方法

//2.将指定的actions函数 映射为当前组件的methods函数
methods:{
  ...mapActions(['addAsync','addNASync'])
}

Getter

用于对Store中的数据进行加工处理形成新的数据

Getter 可以对Store中已有的数据进行加工处理之后形成新的数据类似Vue的计算属性
Store中数据发生变化 Getter的数据也会跟着变化

//定义Getter
const store = new Vuex.store({
  state:{
    count:0
  },
  getters:{
    showNum:state => {
      return: '当前最新的数量是【'+state.count+'】'
    }
  }
})

使用getters的第一种方式

{{this.$store.getters.名称}}

使用getters的第二种方式

import { mapGetters } from 'vuex'

computed:{
  ...mapGetters(['showNum'])
}

vuex中封装登录保存token的方法

新建文件夹storage.js

// 信息保存到本地
export const setItem = (key, value) => {
  if (typeof value === 'object') {
    value = JSON.stringify(value)
  }
  window.localStorage.setItem(key, value)
}

// 获取本地信息
export const getItem = key => {
  const data = window.localStorage.getItem(key)
  try {
    return JSON.parse(data)
  } catch (err) {
    return data
  }
}

// 移除信息
export const removeItem = key => {
  window.localStorage.removeItem(key)
}

在sotre文件index.js中

import { setItem, getItem } from '@/utils/storage'
Vue.use(Vuex)

// 改为常量 防止出错
const TOKEN_KEY = 'TOUTIAO_USER'


export default new Vuex.Store({
 state: {
    // 获取用户信息 赋值到user中
    user: getItem(TOKEN_KEY)
  },
  mutations: {
    // 设置用户信息保存到本地
    setUser (state, data) {
      state.user = data
      setItem(TOKEN_KEY, state.user)
    }
  }
}