Vuex的基本使用

• Vuex基本使用

•   1 Vuex 是什么

•    Vuex 是vue中特别重要的一个技术，专门在vue中实现集中式状态(数据)管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信
•    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
•   更多关于Vuex的介绍，可以参考Vuex 官网：vuex.vuejs.org/zh/
• 
•   github地址：github.com/vuejs/vuex

2 什么时候使用vuex

1 多个组件依赖于同一状态

2 来自不同组件的行为需要更改同一状态

简单来说就是：多个组件需要共享数据时

为了说明vuex的作用，下面展示一个求和案例，分别使用纯vue和Vuex 来实现

3 基本使用(求和案例)

纯vue实现

首先使用纯vue实现

效果如下

注意观察，现在的sum属性都是在count这个组件中使用的，一会我们改造这个案例的时候，把它交给vuex管理再进行对比

<template>
    <div>
       <h3>当前求和为：{{sum}}</h3>
       <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>
    button{
        margin-left: 5px;
    }
</style>

   

字符串转数字

在做这个案例的时候，我发现一个小问题，就算获取下拉框的option的value属性时，是一个字符串，如果相加就会造成字符串拼接，针对这种情况，我们有两种解决方式

解决方式1

给option的value属性加一个:，表示这是一个js表达式

解决方式2

无需上面这么麻烦，还要给每一个value属性加:，可以使用v-model.number进行强转

求和案例(vuex实现)

首先要确保搭建vuex开发环境

安装好了vuex之后，就可以对案例进行改造了，下面使用vuex实现

首先把sum放到state里面

这时候报错了，因为actions里面没有increment这个类型

所以需要给actions里面加入一个increment类型，它是一个函数,有两个参数

参数1：迷你版的store,因为它也有commit,dispatch等api，官方叫做上下文

参数2：传入参数的值

既然知道了参数，就可以使用commit操作了

这时候又报错了，这次是mutation的原因

这里有一个开发小技巧，在编写action进行commit的时候，函数名可以大写，这样就知道要借给mutation进行操作了，mutation可以直接操作属性的值

mutation也有两个参数

参数1是 state,里面存放在属性并且进行数据监视

参数2还是属性的值

既然知道了参数就可以进行逻辑操作了

这样就正常了

继续补充其他的逻辑

虽然可以完成功能，但是可以优化下代码，把判断和定时器放到action里面处理

全部的业务逻辑处理都要在action里面完成，mutation只是负责执行

但是发现，上面两个action的作用很鸡肋，这时候我们可以在组件里面使用commit调用mutation,如果使用dispatch是和action进行对话的

这样一个基本的vuex使用就完成了，这只是一个最基础的，后续会继续升级的

4 Vuex工作原理图

以下这张图是Vuex官网发布的，这张图忽略(没有体现出来)两个地方

首先是一个重要的角色:store

Actions,Mutations,State虽然都是Vuex里面的部分，但是实际上都是由store管理的，像dispatch,commit,也是store的方法

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用

然后就算VueComponents有的场景是可以直接和Mutations进行打交道的，而不用过Actions

具体的工作原理可以参考官网或者其他大牛写的相关文章，个人作为初学者就不过多解释了

5 基本使用总结

1 初始化数据、配置actions、配置mutations，操作文件store.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
        jia(context,value){
                // console.log('actions中的jia被调用了',miniStore,value)
                context.commit('JIA',value)
        },
}

const mutations = {
    //执行加
        JIA(state,value){
                // console.log('mutations中的JIA被调用了',state,value)
                state.sum += value
        }
}

//初始化数据
const state = {
   sum:0
}

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

2 组件中读取vuex中的数据：$store.state.sum

3 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

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