Vue Vuex搭建vuex环境及vuex求和的方法

今天小编给大家分享一下Vue Vuex搭建vuex环境及vuex求和的方法的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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">    <h2>当前求和为：{{ sum }}</h2>    <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 版本

• 执行 npm i vuex@3 来安装 vuex 3 版本

• src 下创建 store 文件夹，在其中创建一个 index.js

index.js

//该文件用于创建vuex中最为核心的store//引入vueximport Vuex from 'vuex'//引入vueimport Vue from "vue";//应用vuex插件Vue.use(Vuex)//准备actions；用于相应组件中的动作const actions = {}//准备mutations；用于操作数据（state）const mutations = {}//准备state；用于存储数据const state = {}//创建并暴露storeexport default new Vuex.Store({    actions:actions,    mutations,//key和value重名了，简写    state,//key和value重名了，简写});

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

......//引入store//import store from './store/index'import store from './store'......//创建vmnew Vue({    el: "#app",    //store:store    store,//触发简写形式    ......})

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

求和案例–vuex版

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

首先把数据交给 state

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

Count.vue

<template>  <div class="category">    <h2>当前求和为：{{$store.state.sum}}</h2>    ......  </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//引入vueximport Vuex from 'vuex'//引入vueimport Vue from "vue";//应用vuex插件Vue.use(Vuex)//准备actions；用于相应组件中的动作const actions = {        //简写为：    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,//当前和}//创建并暴露storeexport default new Vuex.Store({    actions:actions,    mutations,//key和value重名了，简写    state,//key和value重名了，简写});

log 输出：

运行程序：

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

Count.vue

<template>  <div class="category">    <h2>当前求和为：{{$store.state.sum}}</h2>    <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//引入vueximport Vuex from 'vuex'//引入vueimport Vue from "vue";//应用vuex插件Vue.use(Vuex)//准备actions；用于相应组件中的动作const actions = {        //简写为：    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,//当前和}//创建并暴露storeexport 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求和的方法”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。