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

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

前言

vuex是vue的全局状态管理模式，定义在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'
})

这篇关于Vue3.0 - vuex全局状态管理的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！