Vuex —— vue的状态管理工具

一. 什么是Vuex?

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

image.png

上图中绿色虚线包裹起来的部分就是Vuex的核心，state中保存的就是公共状态,，改变state的唯一方式就是通过mutations进行更改。

二. 为什么要使用Vuex?

试想这样的场景, 比如一个Vue的根实例下面有一个根组件名为App.vue, 它下面有两个子组件A.vue和B.vue, App.vue想要与A.vue或者B.vue通讯可以通过props传值的方式, 但是如果A.vue和B.vue之间的通讯就很麻烦了, 他们需要共有的父组件通过自定义事件进行实现.
A组件想要和B组件通讯往往是这样的:


image.png

A组件说: "报告老大, 能否帮我托个信给小弟B" => dispatch一个事件给App
App老大说: "包在我身上, 它需要监听A组件的dispatch的时间, 同时需要broadcast一个事件给B组件"
B小弟说: "信息已收到", 它需要on监听App组件分发的事件

这只是一条通讯路径, 如果父组件下有多个子组件, 子组件之间通讯的路径就会变的很繁琐, 父组件需要监听大量的事件, 还需要负责分发给不同的子组件, 很显然这并不是我们想要的组件化的开发体验.

而Vuex就是为了解决这一问题出现的。
三.如何引入Vuex?

核心知识：

state: 状态中心
mutations: 更改状态
actions: 异步更改状态
getters: 获取状态
modules: 将state分成多个modules，便于管理
  1. 首先使用 vue-init 初始化一个 vue-demo；
  2. 然后在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js，里面的内容如下：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
 
export default store;

3.接下来，在 main.js里面引入store，然后再全局注入一下，这样一来就可以在任何一个组件里面使用this.$store了：

import store from './store'  // 引入store
 
new Vue({
  el: '#app',
  router,
  store,                     // 使用store
  template: '<App/>',
  components: { App }
})

代码和初始化的效果如下图所示:


image.png
//App.vue中的初始化代码

<template>
<div id="app">
    <product-list-one v-bind:products="products"></product-list-one>
    <product-list-two v-bind:products="products"></product-list-two>
</div>
</template>

<script>
import ProductListOne from './components/ProductListOne.vue'
import ProductListTwo from './components/ProductListTwo.vue'

export default {
    name: 'app',
    components: {
        'product-list-one': ProductListOne,
        'product-list-two': ProductListTwo
    },
    data () {
        return {
            products: [
                {name: '鼠标', price: 200},
                {name: '键盘', price: 400},
                {name: '耳机', price: 600},
                {name: '显示屏', price: 800}
            ]
        }
    }
}
</script>

<style>
body{
    font-family: Ubuntu;
    color: #555;
}
</style>

// components/ProductListOne.vue
<template>
    <div id="product-list-one">
        <h2>Product List One</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: ['products'],
    data () {
        return {

        }
    }
}
</script>

<style scoped>
#product-list-one{
    background: #FFF8B1;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
}
#product-list-one ul{
    padding: 0;
}
#product-list-one li{
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
}
.price{
    font-weight: bold;
    color: #E8800C;
}
</style>

//components/ProductListTwo.vue
<template>
    <div id="product-list-two">
        <h2>Product List Two</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: ['products'],
    data () {
        return {

        }
    }
}
</script>

<style scoped>
#product-list-one{
    background: #FFF8B1;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
}
#product-list-one ul{
    padding: 0;
}
#product-list-one li{
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
}
.price{
    font-weight: bold;
    color: #E8800C;
}
</style>
核心概念1: State

state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.

此时我们就可以把App.vue中的两个组件共同使用的data抽离出来, 放到state中,
store/index.js 代码如下:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
    state: {    //要设置的全局访问的state对象
        products: [
            {name: '鼠标', price: 200},
            {name: '键盘', price: 400},
            {name: '耳机', price: 600},
            {name: '显示屏', price: 800}
        ]
    }
})

export default store;

此时,ProductListOne.vue和ProductListTwo.vue也需要做相应的更改

//ProductListOne.vue
export default {
    data () {
        return {
            products : this.$store.state.products //获取store中state的数据
        }
    }
}

//ProductListTwo.vue
export default {
    data () {
        return {
            products: this.$store.state.products //获取store中state的数据
        }
    }
}
核心概念2: Getters

将getters属性理解为所有组件的computed属性, 也就是计算属性. vuex的官方文档也是说到可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

此时,我们可以在index.js中添加一个getters属性, 其中的saleProducts对象将state中的价格减少一半(除以2)

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
    state: {    //要设置的全局访问的state对象
        products: [
            {name: '鼠标', price: 200},
            {name: '键盘', price: 400},
            {name: '耳机', price: 600},
            {name: '显示屏', price: 800}
        ]
    },
    getters:{ //添加getters
        saleProducts: (state) => {
          let saleProducts = state.products.map( product => {
            return {
              name: product.name,
              price: product.price / 2
            }
          })
          return saleProducts;
        }
    } 
})
export default store;

将productListOne.vue中的products的值更换为this.$store.getters.saleProducts

export default {
    data () {
        return {
            products: this.$store.getters.saleProducts 
        }
    }
}

现在的页面中,Product List One中的每项商品的价格都减少了一半


image.png
核心概念3: Mutations

将mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是payload, 也就是自定义的参数.

下面,我们在index.js中添加mutations属性,其中minusPrice这个回调函数用于将商品的价格减少payload这么多, 代码如下:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
    state: {    //要设置的全局访问的state对象
        products: [
            {name: '鼠标', price: 200},
            {name: '键盘', price: 400},
            {name: '耳机', price: 600},
            {name: '显示屏', price: 800}
        ]
    },
    getters:{ //添加getters
        saleProducts: (state) => {
          let saleProducts = state.products.map( product => {
            return {
              name: product.name,
              price: product.price / 2
            }
          })
          return saleProducts;
        }
    },
    mutations:{ //添加mutations
        minusPrice (state, payload ) {
          let newPrice = state.products.forEach( product => {
            product.price -= payload
          })
        }
    }
})

export default store;

在ProductListTwo.vue中添加一个按钮,为其添加一个点击事件, 给点击事件触发minusPrice方法:

<template>
    <div id="product-list-two">
        <h2>Product List Two</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
            </li>
            <button @click="minusPrice">减少价格</button>
        </ul>
    </div>
</template>

在ProductListTwo.vue中注册minusPrice方法, 在该方法中commitmutations中的minusPrice这个回调函数

注意:调用mutaions中回调函数, 只能使用store.commit(type, payload)
export default {
    data () {
        return {
            products: this.$store.state.products 
        }
    },
    methods: {
        minusPrice() {
            this.$store.commit('minusPrice', 2)
        },
    }
}

点击按钮, 可以发现, Product List Two中的价格减少了2, 当然你可以自定义payload,以此自定义减少对应的价格.


image.png
(Product List One中的价格没有发生变化, 是因为getters将价格进行了缓存)
核心概念4: Actions

actions 类似于 mutations，不同在于：

actions提交的是mutations,而不是直接变更状态
actions中可以包含异步操作, mutations中绝对不允许出现异步
actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象.

此时,我们在store中添加actions属性, 其中minusPriceAsync采用setTimeout来模拟异步操作,延迟2s执行 该方法用于异步改变我们刚才在mutaions中定义的minusPrice:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
    state: {    //要设置的全局访问的state对象
        products: [
            {name: '鼠标', price: 200},
            {name: '键盘', price: 400},
            {name: '耳机', price: 600},
            {name: '显示屏', price: 800}
        ]
    },
    getters:{ //添加getters
        saleProducts: (state) => {
          let saleProducts = state.products.map( product => {
            return {
              name: product.name,
              price: product.price / 2
            }
          })
          return saleProducts;
        }
    },
    mutations:{ //添加mutations
        minusPrice (state, payload ) {
          let newPrice = state.products.forEach( product => {
            product.price -= payload
          })
        }
    },
    actions:{ //添加actions
        minusPriceAsync( context, payload ) {
          setTimeout( () => {
            context.commit( 'minusPrice', payload ); //context提交
          }, 2000)
        }
    }
})

export default store;

在ProductListTwo.vue中添加一个按钮,为其添加一个点击事件, 给点击事件触发minusPriceAsync方法

<template>
    <div id="product-list-two">
        <h2>Product List Two</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
            </li>
            <button @click="minusPrice">减少价格</button>
            <button @click="minusPriceAsync">异步减少价格</button> //添加按钮
        </ul>
    </div>
</template>

在ProductListTwo.vue中注册minusPriceAsync方法, 在该方法中dispatchactions中的minusPriceAsync这个回调函数

export default {
    data () {
        return {
            products: this.$store.state.products
        }
    },
    methods: {
        minusPrice() {
            this.$store.commit('minusPrice', 2);
        },
        minusPriceAsync() {
            this.$store.dispatch('minusPriceAsync', 5); //分发actions中的minusPriceAsync这个异步函数
        }
    }
}

点击按钮, 可以发现, Product List Two中的价格延迟2s后减少了5，


image.png
mutations 和 actions 的区别
// 只有 mutations 才能改变 state（mutations 的参数是 state），通过state去获取商品改变价格，使用的时候通过 commit 调用 minusPrice 方法 ------- this.$store.commit('minusPrice', 2);
mutations: function(state, payload) {
  minusPrice() {
    let newPrice = state.products.forEach(()=>{
      product.price -= payload;
    })
  }
}

// 而 actions 是通过 context.commit() 方法去提交 mutations 内的方法， actions 的参数是 context，使用的时候通过 dispatch 方法调用 ------- this.$store.dispatch('minusPriceAsync', 5)
actions:{ // 添加actions
  minusPriceAsync( context, payload ) {
    console.log(context);
    context.commit( 'minusPrice', payload ); //context提交
    // setTimeout( () => {
    //  context.commit( 'minusPrice', payload ); //context提交
    // }, 2000)
  }
}

// 页面使用：
<template>
    <div id="product-list-two">
        <h2>Product List Two</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
            </li>
            <button @click="minusPrice">减少价格</button>
            <button @click="minusPriceAsync">异步减少价格</button>
        </ul>
    </div>
</template>

<script>
export default {
    data () {
        return {
            products: this.$store.state.products 
        }
    },
    methods: {
        minusPrice() {
            this.$store.commit('minusPrice', 2)
        },
        minusPriceAsync() {
            this.$store.dispatch('minusPriceAsync', 5); // 分发actions中的minusPriceAsync这个异步函数
        }
    }
}
</script>
核心概念5: Modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,560评论 4赞 361
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,104评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,297评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,869评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,275评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,563评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,833评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,543评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,245评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,359评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,006评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2赞 273
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2赞 268

推荐阅读更多精彩内容

  • Vuex 状态管理工具
    Vuex是什么？ Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,070评论 0赞 6
  • vuex状态管理 一
    目录 - 1.什么是vuex? - 2.为什么要使用Vuex? - 3.vuex的核心概念？||如何在组件中去使用...
    我跟你蒋阅读 4,093评论 4赞 51
  • vuex 使用说明
    安装 npm npm install vuex --save 在一个模块化的打包系统中，您必须显式地通过Vue.u...
    萧玄辞阅读 2,901评论 0赞 7
  • Vuex一篇文章总结
    vuex 场景重现：一个用户在注册页面注册了手机号码，跳转到登录页面也想拿到这个手机号码，你可以通过vue的组件化...
    sunny519111阅读 7,971评论 4赞 111
  • 我很反感你这样的态度
    有个朋友前几天问了我一个问题。 说有个作家来她学校做讲座，她提了一个问题，说自己在迷茫期，不知道未来的出路在哪，于...
    洛小婧阅读 416评论 1赞 1