vuex代码笔记

╰半夏微凉° 2022-05-04 01:56 217阅读 0赞

store.js文件：

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
        state: {
            size: 5
        },
        mutations: { //同步执行
            add: function (state,param) { //传参
                state.size = state.size+param
                return state.size;
            },
            dec: function (state) {
                return state.size--;
            }
        },
        actions: {//异步执行
            asyncAdd:function (context,param) {
                context.commit('add',param)
            },
            asyncDec:function (context) {
                context.commit('dec')
            },
        },
        getters: {
            getSize: function (state) {
                return state.size * 2;
            },
            stringSize: function (state) {
                return state.size + "次!"
            }
        }
    })

组件中的使用：

<template>
        <div class="app">
            <h1>this is an product1 page</h1>
            <p> {
       {getSize}}</p>
            <p> {
       {stringSize}}</p>
             <p><button @click="add(10)">Add</button></p>
            <p><button @click="dec">Dec</button></p>
        </div>
    
    </template>
    
    <script>
        import {mapGetters} from 'vuex';
        import {mapMutations} from 'vuex';
        import {mapActions} from 'vuex';
        export default {
            name: "Product1",
            computed: {
                ...mapGetters(['getSize', 'stringSize'])
            },
            methods: {
                ...mapMutations(['add', 'dec']),
                ...mapActions(['asyncAdd', 'asyncDec'])
            }
        }
    
    </script>
    
    <style scoped lang="stylus">
        .app
            background #ccab3c
    
        ul, li
            list-style none
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vuex的学习笔记一：认识Vuex和引入

再次学习Vuex并记录下来，方便日后的复习和理解！！！ 1.先看组件之间共享数据的方式又哪些父向子传值：父组件通过v-bind属性绑定，子组件props接收

Bertha 。/ 2022年12月27日 01:57/ 0 赞/ 218 阅读

相关 Vuex笔记

Vuex 1 认识Vuex 1.1 什么是Vuex Vuex 是一个状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测

快来打我*/ 2022年11月03日 04:18/ 0 赞/ 198 阅读

相关 vuex 笔记

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

妖狐艹你老母/ 2022年05月24日 12:08/ 0 赞/ 237 阅读

相关 vuex代码笔记

store.js文件： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex

╰半夏微凉°/ 2022年05月04日 01:56/ 0 赞/ 218 阅读

相关 vuex重点笔记

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

向右看齐/ 2022年04月12日 13:10/ 0 赞/ 240 阅读

相关 Vuex状态管理初始化代码

store目录: ![在这里插入图片描述][2019063019152578.png] state.js文件代码: const state ={

刺骨的言语ヽ痛彻心扉/ 2021年12月19日 18:07/ 0 赞/ 272 阅读

相关 vue项目笔记（21）-vuex代码优化

vuex代码优化在使用vuex的项目代码中，html中往往会出现\{ \{this.$store.state.city\}\}这种代码，很不规范。vuex中给出了部

偏执的太偏执、/ 2021年09月16日 03:16/ 0 赞/ 329 阅读

相关 Vuex笔记（二）——store

Vuex的核心就是store(仓库)。里面包含着项目中共用的数据状态。我们可以来看一个简单的例子： <!DOCTYPE html> <html lang=

我会带着你远行/ 2021年08月14日 01:28/ 0 赞/ 462 阅读

相关 vuex笔记（一）——什么是vuex？

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。项目中，它相当于一个中央管理仓库，来存储一些页面共用的数据或状态，主

痛定思痛。/ 2021年08月13日 22:11/ 0 赞/ 673 阅读

相关 Vuex笔记（三）——state

在Vuex中，我们会发现所有的状态都包含在了一个对象state中。即Vuex使用单一状态树。那我们在Vue组件中获取和展示状态的方法，在上一个笔记里已经有写过：

本是古典何须时尚/ 2021年08月13日 12:52/ 0 赞/ 465 阅读