[JavaScript知识库]Vuex 动态改变颜色

1.在store文件下的index.js 文件下定义变量

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 定义Mutation
export default new Vuex.Store({
  state: {
    count:0,
    color:'red'
  },
  mutations: {
   
    // 改变颜色
    nge(state,step){
      state.color=step
    }
  },
  actions: {

  },
  modules: {
  }
})

2.页面动态使用颜色

<template>
  <div>
    <div :style="{'color':$store.state.color}">{{$store.state.color}}</div>
    <button @click="handleColor">改变颜色</button>
  </div>
</template>


<script>

export default {
  data(){
    return{
    }
  },
  methods:{
    handleColor(){
      console.log(this.$store.state.color)
      this.$store.state.color == 'red' ? this.With():this.back()
      console.log(this.$store.state.color)
    },
    With(){
       this.$store.commit('nge','yellow')
    },
    back(){
      this.$store.commit('nge','red')
    }

  }
}
</script>