VUEX的基本使用之加减案例

组件count

<template>
  <div class="count">
    <h2 > 当前求和为 :{{$store.state.sum}}</h2>
    <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="incrementWate">等一等再加</button>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'

export default {
    name:"Count",
    data() {
      return {
        n:1,//用户选择的数字
        
      }
    },
    methods: {
      increment(){
        // this.$store.dispatch('jia',this.n)
        this.$store.commit('JIA',this.n)
      },
      decrement(){
        this.$store.commit('JIAN',this.n)
      },
      incrementOdd(){
       
        // if (this.Sstore.state.sum%2) {
           this.$store.dispatch('jiaOdd',this.n)
        // }
      },
      incrementWate(){
        // setTimeout(() => {
         this.$store.dispatch('jiaWate',this.n)
        // }, 500);
      },
    },
    
}
</script>

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

app

<template>
  <div id="app">
    <Count/>
  </div>
</template>

<script>
// import {nanoid} from 'nanoid'
  //引入school 组件
  import Count from './components/Count.vue'

  export default {
    name: 'app',
    components: {
      Count
    },
    data() {
      return {
        // foods:['豆腐','白菜','粉条','方便面'],
        // games:['wow','lol','dota','gta5'],
        // films:['教父','醉拳','叶问','霍元甲']
     
      }
    },
    mounted() {
      // console.log(this)
    },
  }
</script>

<style scoped>
  .container{
    display: flex;
    justify-content: space-around;
  }

  video{
    width: 100%
  }
  img{
      width: 100%
  }
</style>

indexjs

//该文件用于创建vuex中的store

//引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
//使用插件
Vue.use(Vuex);
//猪备actions--用于响应组件中的动作
const actions={
    // jia:function (context,vaule) {
    //     context.commit("JIA", vaule)
    // },
    // jian: function (context, vaule) {
    //     context.commit("JIAN", vaule)
    // },
    jiaOdd: function (context, vaule) {

        if (context.state.sum%2) {
            context.commit("JIA", vaule)
        }   
    },
    jiaWate: function (context, vaule) {
        setTimeout(() => {
            context.commit("JIA", vaule)
        }, 500);
    },

}

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

//准备state--用于存储数据
const state = {
    sum: 0//当前的和
}

//创建store
const store=new Vuex.Store({
    actions: actions,
    mutations: mutations,
    state: state
});

//导出store

export default store

mainjs

//引入vue文件

import Vue from 'vue'

// 引入app文件
import App from './App'


//引入store
import store from './store/index.js'



//创建vm
new Vue({
  el:"#app",

  // render:h=>h(App)
  store,

  render(h) {
    
    return h(App);
  },
})