Vue3.0 - vuex全局状态管理

前言

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

• home.vue

• detail.vue

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 - ﹀ ﹀ ﹀ 梦想是咸鱼 关注一下吧