27_Vuex

27_Vuex

01_简介

什么时候使用Vuex
1.多个组件依赖于同一状态
2.来自不同组件的行为需要变更同一状态

一个词: 共享

02__求和案例_纯Vue版

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <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 {
      sum: 0,
      n: 1,
    };
  },
  methods: {
    increment() {
      this.sum += this.n;
    },
    decrement() {
      this.sum -= this.n;
    },
    incrementOdd() {
      if (this.sum % 2) {
        this.sum += this.n;
      }
    },
    incrementWait() {
      setTimeout(() => {
        this.sum += this.n;
      }, 500);
    },
  },
};
</script>

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

03_vuex工作原理

04_搭建vuex环境

npm i vuex

vue2版本 npm i vuex@3

vue3版本 npm i vuex@4

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const actions={}
const mutations={}
const state={}

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

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import store from './store'

new Vue({
  render: h => h(App),
  store,
  beforeCreate(){
    Vue.prototype.$bus=this
  }
}).$mount('#app')

05__求和案例_vuex版

Count.vue

<template>
  <div>
    <h1>当前求和为：{{ $store.state.sum }}</h1>
    <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,
    };
  },
  methods: {
    increment() {
      this.$store.commit("JIA", this.n);
    },
    decrement() {
      this.$store.dispatch("jian", this.n);
    },
    incrementOdd() {
        this.$store.dispatch("jiaOdd", this.n);
    },
    incrementWait() {
        this.$store.dispatch("jiaWait", this.n);
    },
  },
};
</script>

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

index.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
//actions 用于响应组件中的动作
const actions = {
//   jia(context, value) {
//     context.commit("JIA", value);
//   },
  jian(context, value) {
    context.commit("JIAN", value);
  },
  jiaOdd(context, value) {
    if (context.state.sum % 2) {
      context.commit("JIA", value);
    }
  },
  jiaWait(context, value) {
    setTimeout(() => {
      context.commit("JIA", value);
    }, 500);
  },
};

//mutations 用于操作数据
const mutations = {
  JIA(state, value) {
    state.sum += value;
  },
  JIAN(state, value) {
    state.sum -= value;
  },
};
//state 用于存储数据
const state = {
  sum: 0,
};

export default new Vuex.Store({
  actions,
  mutations,
  state,
});

06_getters配置项

07_mapState和mapGetters使用

代码演示

部分index.js代码

//state 用于存储数据
const state = {
  sum: 0,
  school:'尚硅谷',
  subject:'vue'
};
export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters
});

部分Count.vue代码

<template>
<h1>当前求和为：{{ sum}}</h1>
    <h3>乘10倍后的和为:{{bigSum}}</h3>
    <h4>我在{{school}}学习{{subject}}</h4>
</template>
<script>
import {mapState,mapGetters} from 'vuex'
      computed:{
    //第一种写法
    // ...mapState({sum:'sum',school:'school',subject:'subject'})
    
    //第二种写法
    ...mapState(['sum','school','subject']),
        
    ...mapGetters(['bigSum'])

  }
</script>

08_mapAction和mapMutation使用

代码演示

部分index.js代码

const actions = {
  //   jia(context, value) {
  //     context.commit("JIA", value);
  //   },
  jian(context, value) {
    context.commit("JIAN", value);
  },
  jiaOdd(context, value) {
    if (context.state.sum % 2) {
      context.commit("JIA", value);
    }
  },
  jiaWait(context, value) {
    setTimeout(() => {
      context.commit("JIA", value);
    }, 500);
  },
};

//mutations 用于操作数据
const mutations = {
  JIA(state, value) {
    state.sum += value;
  },
  JIAN(state, value) {
    state.sum -= value;
  },
};

部分Count.vue代码

<template>
  <div>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
    data() {
    return {
      n: 1,
    };
  },
methods: {
    // increment() {
    //   this.$store.commit("JIA", this.n);
    // },
    ...mapMutations({increment:'JIA'}),
        
     
    decrement() {
      this.$store.dispatch("jian", this.n);
    },
        
    // incrementOdd() {
    //     this.$store.dispatch("jiaOdd", this.n);
    // },
    // incrementWait() {
    //     this.$store.dispatch("jiaWait", this.n);
    // },
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
      // ...mapActions(['jiaOdd','jiaWait'])
  
  },
</script>

09_模块化+命名空间