脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue Vuex 搭建

Vue Vuex搭建vuex环境及vuex求和案例分享

 更新时间：2022年04月15日 11:29:49   作者：Errol_King  
这篇文章主要介绍了Vue Vuex搭建vuex环境及vuex求和案例分享， Vue 中实现集中式状态管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理，下文相关介绍,需要的朋友可以参考一下

Vuex介绍

概念

在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理(读写)，也是一种组件间通信的方式，且适用于任意组件间通信

何时使用

多个组件需要共享数据时

求和案例–纯vue版

新建 Count.vue 组件，并在 App.vue 中注册引用

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

<script>
import Count from "@/components/Count";

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

<style>

</style>

我们主要关注 Count.vue

<template>
  <div class="category">
    <h1>当前求和为：{{ sum }}</h1>
    <select v-model="n">
      <!--这里的value前有冒号，否则value值是字符串-->
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>

    <!--v-model.number收集到的数据强转为number-->
<!--    <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,//用户选择的数字
      sum: 0,//当前和
    }
  },
  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 scoped>
select, button {
  margin-right: 5px;
}
</style>

搭建vuex环境

注意：

vue2 中要使用 vuex 的 3 版本
vue3 中要使用 vuex 的 4 版本

因为我们使用的是 vue2 所以我们需要安装 vuex 的 3 版本

  • 1、执行 npm i vuex@3 来安装 vuex 3 版本
  • 2、src 下创建 store 文件夹，在其中创建一个 index.js

index.js

//该文件用于创建vuex中最为核心的store

//引入vuex
import Vuex from 'vuex'
//引入vue
import Vue from "vue";
//应用vuex插件
Vue.use(Vuex)

//准备actions；用于相应组件中的动作
const actions = {}
//准备mutations；用于操作数据（state）
const mutations = {}
//准备state；用于存储数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
    actions:actions,
    mutations,//key和value重名了，简写
    state,//key和value重名了，简写
});

3、main.js 中引入刚才写好的 store

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

......

//创建vm
new Vue({
    el: "#app",
    //store:store
    store,//触发简写形式
    ......
})

运行项目，我们可以打印 vm 和 vc，可以看到 $store

求和案例–vuex版

我们将求和的案例改为 vuex 版本

1、首先把数据交给 state

所以我们把 Count 组件中的数据 sum 变量剪切走放到 index.js 中的 state 中，同时 Count 组件中的方法，例如加法 increment 中使用 this.$store.dispatch("方法名",变量) 来替代原来的方法。这样就走完了流程图中以下部分

Count.vue

<template>
  <div class="category">
    <h1>当前求和为：{{$store.state.sum}}</h1>
    ......
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1,//用户选择的数字
    }
  },
  methods: {
    increment() {
      this.$store.dispatch("jia",this.n);
    }
    ......
  }
}
</script>

同时 index.js 中的 action 中添加对应的方法名，从图上的流程图来看，actions 中的东西会交到 mutations 中处理，所以需要手动调用 commit方法

mutation 中也需要增加同样的方法名，这里可以都改成大写，做个区分。方法中第一个参数就是 state，方法中处理真实逻辑即可

index.js

//该文件用于创建vuex中最为核心的store

//引入vuex
import Vuex from 'vuex'
//引入vue
import Vue from "vue";
//应用vuex插件
Vue.use(Vuex)

//准备actions；用于相应组件中的动作
const actions = {
    /*jia:function () {
    }*/
    //简写为：
    jia(context,value){
        console.log("actions中的jia被调用了",context,value);
        context.commit("JIA",value)
    }
}
//准备mutations；用于操作数据（state）
const mutations = {
    JIA(state,value){
        console.log("mutations中的JIA被调用了",state,value);
        state.sum += value;
    }
}

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

//创建并暴露store
export default new Vuex.Store({
    actions:actions,
    mutations,//key和value重名了，简写
    state,//key和value重名了，简写
});

log 输出：

运行程序：

我们根据以上思路完善其他方法

Count.vue

<template>
  <div class="category">
    <h1>当前求和为：{{$store.state.sum}}</h1>
    <select v-model="n">
      <!--这里的value前有冒号，否则value值是字符串-->
      <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.dispatch("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>
select, button {
  margin-right: 5px;
}
</style>

index.js

//该文件用于创建vuex中最为核心的store

//引入vuex
import Vuex from 'vuex'
//引入vue
import Vue from "vue";
//应用vuex插件
Vue.use(Vuex)

//准备actions；用于相应组件中的动作
const actions = {
    /*jia:function () {
    }*/
    //简写为：
    jia(context,value){
        console.log("actions中的jia被调用了");
        context.commit("JIA",value)
    },
    jiaOdd(context,value){
        console.log("actions中的jianOdd被调用了");
        if(context.state.sum % 2){
            context.commit("JIA",value)
        }
    },
    jiaWait(context,value){
        console.log("actions中的jianWait被调用了");
        setTimeout(() => {
            context.commit("JIA",value)
        }, 500)
    }
}
//准备mutations；用于操作数据（state）
const mutations = {
    JIA(state,value){
        console.log("mutations中的JIA被调用了",state,value);
        state.sum += value;
    },
    JIAN(state,value){
        console.log("mutations中的JIAN被调用了",state,value);
        state.sum -= value;
    }
}

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

//创建并暴露store
export default new Vuex.Store({
    actions:actions,
    mutations,//key和value重名了，简写
    state,//key和value重名了，简写
});

到此为止，功能就实现了，你发现了吗，这里做了些优化，由于 index.js 中的 jia、jian方法里边什么都没做，直接就 commit 给了 mutation，而 vc 是可以直接对话 Mutations 的，如下图：

所以我们把 index.js 中 actions 中的 jian方法去掉，在 Count 中直接调用 mutation 中的方法，也就是我们把 jian方法去掉，在 Count 的 decrement 方法中直接调用 commit 了

decrement() {
    this.$store.commit("JIAN",this.n);
},

若没有网络请求或其他业务逻辑，组件中也可以越过 actions，即不写 dispatch，直接编写 commit

一些疑惑和问题

index.js 中的上下文有什么作用？我们可以打印下 context：

可以看到其中有dispatch、commit、state这些熟悉的身影。我们用 jiaOdd 举例，当方法逻辑处理复杂时，可以继续 dispatch 其他方法来分担。而有了 state 我们可以拿到其中的 sum 值：

    jiaOdd(context,value){
        console.log("actions中的jianOdd被调用了",context);
        if(context.state.sum % 2){
            context.commit("JIA",value)
        }
        context.dispatch("demo",value)
    },
    demo() {
        //处理一些事情
    },

到此这篇关于Vue Vuex搭建vuex环境及vuex求和案例分享的文章就介绍到这了,更多相关Vue Vuex 搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 如何利用Vue3+Element Plus实现动态标签页及右键菜单

    如何利用Vue3+Element Plus实现动态标签页及右键菜单

    标签页一般配合菜单实现,当你点击一级菜单或者二级菜单时,可以增加对应的标签页,当你点击对应的标签页,可以触发对应的一级菜单或者二级菜单,下面这篇文章主要给大家介绍了关于如何利用Vue3+Element Plus实现动态标签页及右键菜单的相关资料,需要的朋友可以参考下
    2022-11-11
  • 详解element-ui表格的合并行和列(非常细节)

    详解element-ui表格的合并行和列(非常细节)

    最近在需求中遇到了elementUI合并行,索性给大家整理下,这篇文章主要给大家介绍了关于element-ui表格的合并行和列的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • element-ui table表格控件实现单选功能代码实例

    element-ui table表格控件实现单选功能代码实例

    这篇文章主要给大家介绍了关于element-ui table表格控件实现单选功能的相关资料,单选框是指在 Element UI 的表格组件中,可以通过单选框来选择一行数据。用户只能选择一行数据,而不能同时选择多行,需要的朋友可以参考下
    2023-09-09
  • Vue封装的标准漏斗图教程

    Vue封装的标准漏斗图教程

    文章展示了基于Vue封装的标准漏斗图的代码,包括权重算法、滚轮监听和点击示例功能,旨在提供实用的图表展示技巧
    2025-02-02
  • Jenkins Sidebar Link插件实现添加侧边栏功能详解

    Jenkins Sidebar Link插件实现添加侧边栏功能详解

    这篇文章主要介绍了vue框架实现添加侧边栏，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • vue篇之事件总线EventBus使用示例详解

    vue篇之事件总线EventBus使用示例详解

    这篇文章主要为大家介绍了vue篇之事件总线EventBus使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • vue中keep-alive组件的入门使用教程

    vue中keep-alive组件的入门使用教程

    这篇文章主要给大家介绍了关于vue中keep-alive组件的入门使用教程，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • vue实现element-ui对话框可拖拽功能

    vue实现element-ui对话框可拖拽功能

    这篇文章主要介绍了vue实现element-ui对话框可拖拽功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 利用vue.js实现被选中状态的改变方法

    利用vue.js实现被选中状态的改变方法

    下面小编就为大家分享一篇利用vue.js实现被选中状态的改变方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 关于vant的时间选择器使用方式

    关于vant的时间选择器使用方式

    这篇文章主要介绍了关于vant的时间选择器使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论