Vuex实例

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createStore } from 'vuex';

const store = createStore({
  state () {
    return {
      color: [100, 100, 100]
    };
  },
  mutations:{
    randomColor (state) {
    state.color = [
      Math.floor(Math.random() * 255),
      Math.floor(Math.random() * 255),
      Math.floor(Math.random() * 255)
    ];
  }
  } 
})

const app = createApp(APP);
app.use(store);
app.mount("#app");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!-- App.vue -->
<template>
  <main>
    <button></button>
  </main>
</template>
<script>
  export default {
    computed: {
      bgColor() {
        const colors = this.$store.state.color;
        return `rgb(${colors.join(',')})`;
      }
    },
    methods: {
      changeColor() {
        this.$store.commit('randomColor');
      }
    }
  }
</script>
<style>
  main {
    background-color: v-bind(bgColor);
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

编辑

上次更新: 2023/04/01, 15:26:22

← 路由元数据