美文网首页让前端飞程序员
说说如何使用 Vuex 进行状态管理

说说如何使用 Vuex 进行状态管理

作者: deniro | 来源:发表于2019-04-13 21:20 被阅读113次

1 为什么需要状态管理

一个 Vue 组件分为数据(model)与视图(view)。当通过 methods 中的方法更新数据时,视图也会自动更新。

message.vue

<template>
    <div>
        {{message}}
        <button @click="changeMessage">改变内容</button>
    </div>
</template>

<script>
    export default {
        name: "message",
        data() {
            return {
                message: '你好'
            };
        },
        methods: {
            changeMessage() {
                this.message = '我很好'
            }
        }
    }
</script>

效果:

这个示例中的 message 与 changeMessage() 只能在 message.vue 组件中使用。而在实际应用中,常见的就是跨组件共享数据的要求。这时,就可以通过 Vuex 来优雅并高效地管理组件状态啦O(∩_∩)O~

注意: Vuex 有一定的技术门槛,它主要应用于多人协同开发的大型单页面应用。所以,是否使用 Vuex 取决于团队规模与技术储备。

2 安装 Vuex

npm install --save vuex

安装版本:vuex@3.1.0

3 基本用法

3.1 引入 Vuex

在 main.js 中引入 Vuex:

...
//引入 vuex 插件
import Vuex from 'vuex';
...

//加载 vuex 插件
Vue.use(Vuex);

//Vuex 配置
const store = new Vuex.Store({
    state: {
       ...
    },
    mutations: {
       ...
    }
});
...

new Vue({
    el: '#app',
  ...
    //使用 Vuex
    store: store,
 ...
})

Vuex 中的 store 包含应用的数据状态和操作过程。store 中的数据发生变化,使用了这些数据的组件也会立即更新。

3.2 定义数据

数据定义在 Vuex 的 states 属性中。

我们以计数器为例。定义了一个 count 数据并初始化为 0:

const store = new Vuex.Store({
    state: {
        count: 0
    }
});

3.3 读取数据

数据定义好之后,就可以在 vue 组件中通过 $store.state.count 读取出来啦,比如在 index.vue 中可以这样写:

<template>

    <div>
       ...
        {{count}}
      ...
    </div>
</template>

<script>
    export default {
        name: "index.vue",
        computed: {
            count() {
                return this.$store.state.count;
            }
        },
  
      ...
  }
</script>

这里利用计算属性,从 Vuex 的 store 中读取了计数器的当前值。

3.4 修改数据

使用 Vuex 的 mutations 属性,可以修改 state 中定义的数据。我们为计数器定义增长与减少操作:

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state, n = 1) {
            state.count += n;
        },
        decrease(state) {
            state.count--;
        }
    }
});

mutations 中的函数,可以有两个入参。第一个入参是 state,第二个入参可以是任意类型。比如这里可以为新增操作,指定增长量,如果不指定,那么增长量就默认为 1。

注意: 如果需要传入多个参数,那么我们可以在此传入一个带多个参数的对象。

这里使用了 ES 6 为函数设置默认值的语法。 increment(state, n = 1)等同于:

increment (state, n){
 n = n || 1;
}

在 *.vue 组件中,可以通过 this.$store.commit 方法来执行 mutations。我们在 index.vue 中,新增三个按钮,用于 “+1” 、“-1” 和 "+3" 操作:

<template>

    <div>
 
        {{count}}
        <button @click="handleIncrement">+1</button>
        <button @click="handleDecrease">-1</button>
        <button @click="handleIncrementMore">+3</button>
    </div>
</template>

<script>
    export default {
        ...
        methods: {
            handleIncrement() {
                this.$store.commit('increment');
            },
            handleDecrease() {
                this.$store.commit('decrease');
            },
           handleIncrementMore() {
                this.$store.commit('increment', 3);
            }
         }
      }
</script>

this.$store.commit 方法的入参,是在 mutations 中定义的函数名。

还可以通过指定 type 的方式提交, type 的值就是 mutations 中定义的函数名:

main.js

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
       ...
        incrementByParam(state, params) {
            state.count += params.count;
        }
    }
});

index.vue

<template>

    <div>
        {{count}}
       ...
        <button @click="handleByParam">+30</button>
    </div>
</template>

<script>
    export default {
        ...
        methods: {
            ...
            handleByParam() {
                this.$store.commit({
                    type: 'incrementByParam',
                    count: 30
                });
            },
        }
    }
</script>

注意:如果在 mutations 中异步操作了数据,那么组件在 commit 提交之后,将无法立即改变数据。所以,在 mutations 中,建议尽量使用同步方法来操作数据。

效果:

相关文章

  • 说说如何使用 Vuex 进行状态管理

    1 为什么需要状态管理 一个 Vue 组件分为数据(model)与视图(view)。当通过 methods 中的方...

  • Vuex——状态管理

    前言:项目中有使用Vuex,通过官网进行学习,现进行总结。 Vuex--状态管理模式 状态管理模式包含以下几个部分...

  • Vuex

    Vuex简介: 由于使用propes传递数据太麻烦,所以使用vuex进行状态管理。不能直接修改vuex中的数据,只...

  • 解决vuex中页面刷新数据丢失问题

    再使用vue进行开发的过程中,状态管理工具一般使用vuex进行管理。但是vuex数据存储在内存中,所以当前页面刷新...

  • Vue学习笔记(三)

    一. 状态管理 Vuex 1. Vuex使用 Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用...

  • Vuex 2.0

    概念 Vuex 类似 Redux 的状态管理器,用来管理Vue的所有组件状态。 为什么使用Vuex? 当你打算开发...

  • Vuex

    一、vuex之store 1、vuex 定义 管理状态 + 共享数据 ,在各个组件间管理外部状态 2、使用 a、引...

  • vuex基础

    1.vuex是什么? 状态管理模式,集中式存储管理,多组件需要共享状态时使用vuex 1.1状态管理模式 单个组件...

  • vue.js---前端状态管理

    Vuex之store 作用: 用来管理状态,共享数据,在各个组件之间管理外部状态 如何使用?安装 第一步:引入vu...

  • vuex 原理解析

    vuex的原理关键:使用vue实例管理状态

网友评论

    本文标题:说说如何使用 Vuex 进行状态管理

    本文链接:https://www.haomeiwen.com/subject/dgmrwqtx.html