• Vuex基本使用

  
  

• 1 Vuex 是什么

  
  

• Vuex 是 vue 中特别重要的一个技术，专门在 vue 中实现集中式状态(数据)管理的一个 vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

• 更多关于 Vuex 的介绍，可以参考 Vuex 官网：https://vuex.vuejs.org/zh/

• 

• github 地址：https://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'//引入Vueximport Vuex from 'vuex'//引用VuexVue.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}
//创建并暴露storeexport default new Vuex.Store({        actions,        mutations,        state,})

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

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

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