liaooliver

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  getters: {
    // 預先處理轉換色碼
    colorNumber: (state, getters) => {
      switch (state.color) {

liaooliver

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
    mutations: {
      changeColor(state, payload) {
        // 獲取來自 state value 然後用  payload 的值取代 
        state.color = payload;

liaooliver

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
    actions: {
    // actions 中有兩個函式 changeColor & changeTextContent
    // 這兩個函式上都有做一件事情 => context.commit()
    // context.commit()這個函式的作用是呼叫 Mutations function 執行改變 state 狀態

liaooliver

<script>
export default {
  name: "App",
 methods: {
    changeColor(color) {
      // 透過 dispatch 執行 Actions function
      this.$store.dispatch("changeColor", color);
      this.$store.dispatch(
        "changeTextContent",
        `Vuex state 狀態被改變了 ， 現在是 ${color}`

liaooliver

<script>
export default {
  name: "App",
  methods: {
    testGetVuex() {
      console.log(this.$store);
    },
    changeColor(color) { }
  },
  computed: {

liaooliver

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
    // 在 state 建立狀態變數以及初始狀態
    state: {
      color: "",
      showText: "初始 Vuex 的 state 是空的，所以是黑色字體"

liaooliver

<template>
    <div id="app">
       // 建立一個按鈕，綁定 testGetVuex 事件
        <button @click="testGetVuex()">測試 取得 Vuex 實體</button>
    </div>
</template>
<script>
export default {
    name: "App",
    methods: {

liaooliver

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
    state:{},
    actions:{},
    mutations:{},
    getters:{}

liaooliver

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
new Vue({
    store,
    render: h => h(App)
}).$mount("#app");