Vuex入门篇——基本使用

2022-12-22 0 1,022

早已开始前,请试著认知上面这那哥的亲密关系,也许有利于你认知上面的相关Vuex的采用如是说。

Vuex入门篇——基本使用

Vuex采用方式

题题题1、加装  

假如你早已早已开始了两个工程项目,他们间接运转指示加装Vuex

npm

 install vuex

2、注册登记

将相关Vuex的标识符留存在增建的文档store.js。总之,您能随便重新命名。他们将在此文档中保有储存第一类,接着将其复制到main.js,他们将在自上而下Vue示例中注册登记Vuex

增建文档main.js。

Vuex入门篇——基本使用

在自上而下Vue示例中注册登记Vuex

Vuex入门篇——基本使用

3、state  

在他们的store.js文档中,需要在store中储存一些数据,接着其他组件将对其进行mutaition操作state第一类。

他们能采用预定义的关键字将数据添加到他们的store中state,接着像他们在采用data()中的数据一样,用this.$store.state拿到并采用

Vuex入门篇——基本使用

4、getters  

在一些情况下,他们需要在采用state数据之前进行数据处理或进行一些数学运算。采用getter,他们能对数据执行操作,接着得到处理过的数据结果。getter需要状态第一类,这由Vuex自动传递给getter。

上面例子中,他们早已用过counter这个计算属性,用于跟踪单击按钮的次数,接着检索它。那么,在显示点击次数之前,他们将点击次数增加一倍如何呢?他们能采用getter来达到这个结果。

Vuex入门篇——基本使用

他们早已创建了getter。让他们在App.vue组件中使this.$store.getters。

Vuex入门篇——基本使用

5、mutations 

更改数据属性的state时,只需执行mutation即可。在mutation中指定要对data属性进行的更改。

让他们创建两个mutation来改变state中的数据。记得,mutations需要访问state第一类才能对指定数据名进行操作。

Vuex入门篇——基本使用

说到采用mutation,情况有所不同。与getter和state不同,并不会像那样访问mutationthis.$store.mutations。而是commit两个指定的mutation名称。

Vuex入门篇——基本使用

在clicked()方式中,他们告诉Vuex 提交两个名为increment的mutation,从而更改state中的数据

6、actions 

action调用mutation进行异步操作的功能。与mutation不同,action能包含异步操作。

让他们创建两个action来调用mutation,间接的操作数据。

import Vue from vue

;

import Vuex from vuex

;

Vue.use(Vuex);

export const store=new

 Vuex.Store({

    state

:{

        counter:0

},

    getters

:{

        doubleClicks:state=>

{

            return state.counter * 2

;

        }

    },

    mutations

:{

        increment:state=>

{

state.counter++

        }

    },

    actions

:{

        asyncIncrement:({commit})=>

{

            setTimeout(() =>

 {

                commit(increment

);

            }, 2000

);

        }

    }

})

与mutation类似,我们在应用中dispatch两个action,间接的达到修改数据的效果。

<template>    <div class=“home”>        <h1>Number of clicks:{{counter}}</h1>        <button @click=“clicked”>Start action here</button>    </div></template><script

>

export default

 {

    computed

:{

counter(){

            return this

.$store.state.counter;

        }

    },

    methods

:{

        clicked(){

            this.$store.dispatch(increment

)

        }

    }

}

</script>

以上是Vuex的基本上采用方式,希望有利于你的进一步认知~

历史内容

What exactly is Node.js

用node搭建两个服务器

补充总结node

loading小案例

国产浏览器的发展史

浏览器发展史

Vuex入门篇——基本使用

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务