Vuex的基本使用

Vuex入门教程：核心概念与实践

最新推荐文章于 2022-12-02 23:12:46 发布

原创最新推荐文章于 2022-12-02 23:12:46 发布 · 604 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

store 同时被 2 个专栏收录

6 篇文章

订阅专栏

vuex

6 篇文章

订阅专栏

本文将介绍Vuex的基本概念，包括状态管理、 mutations、actions、getters的使用，以及如何在Vue组件中调用Vuex的store。通过实例解析，帮助开发者理解Vuex在前端应用中的重要性和实现方式。

1. 初始化数据state,配置actions、mutations,操作文件store.js
2. 组件中读取vuex中的数据：$store.state.数据
3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)
或$store.commit('mutations中的方法名',数据)
若没有网络请求或其他业务逻辑，组件中也可越过actions,即不写dispatch，直接编写commit
src/store/index.js该文件用于创建Vuex中最为核心的store

import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'

//使用Vuex插件
Vue.use(Vuex)

//准备actions ==> 用于响应组件中的动作
const actions = {
   //jia(context,value) {
      //context 相当于精简版的$store
      //context.commit('JIA',value)
   //},
   //jian(context,value) {
      //context.commit('JIAN',value)
   //},
  //以上的jia和jian没有之际的作用，故而可以省略，下面的jiaOdd和jiaWait分别做了判断和延迟的作用，故而需要保留
  
   jiaOdd(context,value) {
      if(context.state.sum % 2) {
         context.commit('JIA',value)
      }
   },
   jiaWait(context,value) {
      setTimeout(()=>{
         context.commit('JIA',value)
      },500)
   }
}

//准备mutations ==> 用于操作数据（state）
const mutations = {
   JIA(state,value) {
      state.sum += value
   },
   JIAN(state,value) {
      state.sum -= value
   }
}
const state = {
   sum: 0, //当前的和
}

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

src/components/Count

<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.commit('JIAN',this.n)
         },
         incrementOdd() {
            this.$store.dispatch('jiaOdd',this.n)
         },
         incrementWait() {
            this.$store.dispatch('jiaWait',this.n)
         }
      }
   }
</script>

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