Vuex的使用（二）——state和getters的定义和用法

女爷i 2022-09-09 09:28 195阅读 0赞

参考文档：https://vuex.vuejs.org/zh/guide/

首先说明一下笔者对state和getters的理解：

state是在前端应用中需要全局共享和维护的状态，但这个状态并没有被持久化（页面刷新就会丢失）；  
getters是基于state派生出的状态（其作用与计算变量类似，好处是不同在所有的组件中都写一次派生算法）。

state的用法比较简单，具体可以参考上一篇文章中的例子，下面主要介绍一下getters的几种常见基本用法。首先在Vuex中声明getters（修改文件路径为src\\store\\index.js），代码如下：

import Vue from "vue";
    import Vuex from "vuex";
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({ 
        state: { 
            param1: "state param"
        },
        getters: { 
            param2: state => { 
                // 基于state（param1）派生出的getters（param2）
                return `new ${ state.param1}`;
            },
            // 可以通过第二个固定参数getters获取其他getters（如上面的param2）
            param3: (state, getters) => { 
                return `another ${ getters.param2}`;
            },
            // getters支持返回一个函数
            param4: state => index => { 
                return state.paramArray[index];
            }
        }
    });
    
    export default store;

在组件中使用Vuex的getters（修改文件路径为src\\components\\componentA.vue），代码如下：

<template>
        <div>
            <span>state及getter基础用法</span>
            <br />
            <span>stete in vuex：{
       {param1}}</span>
            <br />
            <span>getters in vuex：{
       {param2}}</span>
            <br />
            <span>use another getter in getter：{
       {param3}}</span>
            <br />
            <span>send parameter to getter：{
       {param4}}</span>
        </div>
    </template>
    
    <script> export default { name: "component-a", computed: { param1() { return this.$store.state.param1; }, // 和state一样，getters也必须在计算变量中使用 param2() { return this.$store.getters.param2; }, // 打印结果为another new state param，param3获取了param2的值 param3() { return this.$store.getters.param3; }, // param4返回的是一个函数，所以可以传入一个参数，实际打印的是函数的return结果 param4() { return this.$store.getters.param4(0); } } }; </script>

getters的几种常见基本用法就介绍到这里。