关于vuex: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 的写法

<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>