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 的写法
<template>  <div id="useVuex">    <div class="autoMsg">{{ data.count }}</div>    <div class="button">      <el-button type="warning" plain @click="add"        >触发vuex扭转的事件</el-button      >    </div>    <div class="result scroll"></div>  </div></template><script>import { reactive } from "vue";import { useStore } from "vuex";export default {  nameL: "useVuex",  setup() {    let store = useStore();    let data = reactive({      count: 0,    });    let add = () => {      // 点击的时候，被动去触发store的事件      store.dispatch("addCount");      // store中的事件扭转全局的值，赋给count      data.count = store.getters.getCount;    };    return {      data,      add,    };  },};
  • 获取全局变量，在另一个组件中获取
<template>  <div id="transDef">    <div class="autoMsg">{{ data.count }}</div>    <div class="button"></div>    <div class="result scroll"></div>  </div></template><script>import { reactive } from "vue";import { useStore } from "vuex";export default {  nameL: "transDef",  setup() {    let store = useStore();    let data = reactive({      count: 0,    });    data.count = store.getters.getCount;    return {      data,    };  },};</script>