vuex

概念：在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 Vue 应用中多个组件

getters使用

1.概念：
当 state 中的数据需要经过加工后再使用时，可以使用 getters 加工
2.在 store.js 中追加 getters 配置

const getters={
bigSum(state){
return state.sum \* 10
}
}

//创建并暴露 store
export default new Vuex.Store({
getters
}) 

3.组件中读取数据：

$store.getters.bigSum

getters 的使用：

1.概念：
当 state 中的数据需要经过加工后再使用时，可以使用 getters 加工
2.在 store.js 中追加 getters 配置

const gerrers = {
bigSum(state){
return state.sum\*10
}
}

//创建并暴露 store
//暴露、创建 store
export default new Vuex.Store({
getters
})

3.组件中读取数据

$store.getters.bigSum

e77a0010f82ea8861182a5b39fb115b.png

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  store,
  beforeCreate () {
    Vue.prototype.$bus  =  this //安装全局事件总线
  }
}).$mount('#app')

App.vue

<template>
  <div>
    <Count />
  </div>
</template>

<script>
// 引入组件
import Count from './components/Count'

export default {
  name: 'App',
  components: { Count },
}
</script>

index.js

// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入vuex
import Vuex from "vuex";
Vue.use(Vuex)
//准备actions-用于响应组件中的动作
const actions = {
  // jia(context,value){
  // //  console.log("actions中的jia调用了")
  //   context.commit('JIA',value)
  // },
  // jian(context,value){
  // //  console.log("actions中的jian调用了")
  //   context.commit('JIAN',value)
  //  },
  jiaOdd(context,value){
  //  console.log("actions中的jian调用了")
    context.commit('JIAODD',value)
   },
  jiaWait(context,value){
  //  console.log("actions中的jian调用了")
    context.commit('JIAWAIT',value)
   }
}
//准备mutations-用于操作数据（state）
const mutations = {
  JIA(state,value){
  //  console.log("mutations中的jia调用了")
    state.sum += value
  },
  JIAN(state,value){
  //  console.log("mutations中的jia调用了")
    state.sum -= value
  },
  JIAODD(state,value){
  //  console.log("mutations中的jia调用了")
    if (state.sum % 2) { 
        state.sum += value
    }
  },
  JIAWAIT(state,value){
  //  console.log("mutations中的jia调用了")
    setTimeout(() => {
       state.sum += value
    }, 500);
  },
}
//准备state-用于存储数据
const state = {
  sum: 0,//当前的和
  school: '清华大学',
  subject:'前端'
}
//准备getters-用于将state中的数据进行加工
const getters = {
  bigSum(state) {
    return state.sum*10
  }
}

//暴露、创建store
export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters
})

Count.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前求和放大10倍为：{{ bigSum }}</h3>
    <h3>我在{{ school }},学习{{ subject }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: 'Count',
  data() {
    return {
      n: 1, //用户选择的数字
    }
  },
  computed: {
    sum() {
      return this.$store.state.sum
    },
    school() {
      return this.$store.state.school
    },
    subject() {
      return this.$store.state.subject
    },
    bigSum() {
      return this.$store.getters.bigSum
    },
  },
  methods: {
    increment() {
      // this.$store.dispatch('jia', this.n)
      this.$store.commit('JIA', this.n)
    },
    decrement() {
      // this.$store.dispatch('jian', this.n)
      this.$store.commit('JIAN', this.n)
    },
    incrementOdd() {
      this.$store.dispatch('jiaOdd', this.n)
    },
    incrementWait() {
      this.$store.dispatch('jiaWait', this.n)
    },
  },
}
</script>

<style>
button {
  margin-left: 10px;
}
</style>