vuex 的使用

vuex 的简介

• vuex 是全局状态管理器，在 state 中定义一个全局变量，可以在任何一个组件中进行获取、修改，并且可以将修改的内容同步到全局

vuex 的安装

npm install vuex --save

vuex 的配置

• 项目中新建一个名为 store 的文件夹，用来存放所有配置文件或设置全局变量的文件

import { createStore } from 'vuex'

export default createStore({
  // 要设置的全局访问的state对象
  state: {
    count: 0
  },
  mutations: {
    // 进行数据更新，改变数据状态
    countType(state, action) {
      state.count = state.count + action.addNum
    }
  },
  actions: {
    // 执行动作，将数据发散到需要的位置
    addCount(context) {
      let action = {
        addNum: 20
      }
      context.commit('countType', action)
    }
  },
  getters: {
    // 获取到最终的数据结果
    getCount(state) {
      console.log('getters-store中获取到了state', state);
      return state.count
    }
  }
})

vuex 的全局注入

• 入口文件(一般为 main.js)中引入 store，然后全局注入

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

vuex 的使用

• 改变全局 state 中的变量，这里用的是 vue3 的写法