Javascript

Vue3.0 - vuex全局状态管理

本文主要是介绍Vue3.0 - vuex全局状态管理,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录
  • 前言
  • 具体使用
    • 定义Vuex全局变量
    • 示例:利用vuex进行路由切换(监听全局变量)
    • Vuex改变全局状态变量并传参的3种方式
      • 方式一
      • 方式二
      • 方式三

前言

vuexvue的全局状态管理模式,定义在vuex中的值可在整个项目的组件中使用


具体使用

定义Vuex全局变量

  • 安装
npm install vuex --save
  • 初始化store/index.js
import { createStore } from 'vuex'

export default createStore({
  /**
   * 集中存储组件的状态
   */
  state: {
    name: ''
  },
  /**
   * 改变数据方法的集合
   */
  mutations: {
  },
  /**
   * 改变mutations,不直接变更状态
   */
  actions: {
  },
  /**
   * 可以将store进行功能拆分,分割成不同的模块
   */
  modules: {
  }
})
  • 应用
import store from '@/store/index'

console.log(store.state.name)

示例:利用vuex进行路由切换(监听全局变量)

  • 实现原理:在点击事件中通过监听vuex全局变量的改变做路由跳转,路由跳转页面由全局状态改变的参数决定,效果如下:

在这里插入图片描述

  • store/index.js
import { createStore } from 'vuex'

export default createStore({
  /**
   * 集中存储组件的状态
   */
  state: {
    name: '', // 跳转组件的name
  },
  /**
   * 改变数据方法的集合
   */
  mutations: {
    changeView (state, name) {
      state.name = name
    }
  },
  /**
   * 改变mutations,不直接变更状态
   */
  actions: {
  },
  /**
   * 可以将store进行功能拆分,分割成不同的模块
   */
  modules: {
  }
})
  • App.vue
<template>
  <div>
    <router-view/>
  </div>
</template>

<script>
import router from '@/router'
import store from '@/store/index'
import { watch, computed } from 'vue'

export default {
  name: 'App',
  /**
   * 监听vuex中的name属性做路由跳转
   */
  setup (props, context) {
    const changedName = computed(() => store.state.name)
    watch(changedName, (newVal, oldVal) => {
      router.push({
        name: newVal
      })
    })
  }
}
</script>
  • home.vue
<template>
  <div>首页</div>
  <img @click="toDetail" src="@/assets/logo.png" style="width: 100%;"/>
</template>

<script>
import store from '@/store/index'

export default {
  name: 'home',
  components: {

  },
  methods: {
    toDetail (event) {
      // 改变全局状态变量
      store.commit('changeView', 'Detail')
    }
  }
}
</script>
  • detail.vue
<template>
  <div>详情页</div>
</template>

Vuex改变全局状态变量并传参的3种方式

方式一

  • 示例中的传参方式
  • store/index.js
state: {
  name: ''
},
mutations: {
  changeView (state, name) {
    state.name = name
  }
}
  • home.vue
// store.commit 传参方式1
store.commit('changeView', 'Detail')

方式二

  • store/index.js
state: {
  name: ''
},
mutations: {
  changeView1 (state, payload) {
    state.name = payload.name
    console.log(payload)
  }
}
  • home.vue
// store.commit 传参方式2
store.commit({
  type: 'changeView1',
  name: 'Detail'
})

方式三

  • store/index.js
state: {
  params: {}
},
mutations: {
  changeView2 (state, payload) {
     state.params = payload.params
     console.log(payload)
  }
}
  • home.vue
// store.commit 传参方式3
store.commit('changeView2', {
  name: 'Detail'
})

- End -
梦想是咸鱼
关注一下吧
这篇关于Vue3.0 - vuex全局状态管理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!