Vuex的使用（一）——在项目中引入Vuex

港控/mmm° 2022-09-09 06:41 245阅读 0赞

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

如果当前没有项目代码，可以访问[传送门][Link 1]搭建一个，以下Vuex相关功能都是在传送门搭建项目的基础上开发的。

首先是Vuex的创建（新增文件路径为src\\store\\index.js），代码如下：

import Vue from "vue";
    import Vuex from "vuex";
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({ 
        state: { 
            param1: "state param"
        }
    });
    
    export default store;

向Vue中注入Vuex（修改文件路径为src\\main.js，在创建Vue实例时增加了strore属性），代码如下：

import Vue from 'vue'
    import store from './store'
    import ComponentA from './components/ComponentA.vue'
    
    new Vue({ 
        el: '#app',
        store,
        components: {  ComponentA },
        template: '<div><component-a></component-a></div>'
    });

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

<template>
        <div>
            <span>stete in vuex：{ { param1}}</span>
        </div>
    </template>
    
    <script>
    export default { 
        name: "component-a",
        computed: { 
            param1() { 
                // 注意是在计算变量中使用state，这样计算变量param1才能实时感知到state里param1的变化
                return this.$store.state.param1;
            }
        }
    };

运行后可以在页面上看到打印的结果：stete in vuex：state param。

至此，我们就完成了Vuex在项目中的引入。

[Link 1]: https://liqing.blog.csdn.net/article/details/91961203

发表评论取消回复

表情：

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

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

相关阅读

相关在vue-cli项目里使用vuex,vuex的详细使用

一，什么是vuex 简单来说就是data的共享属性二，关于store > “store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。 > >

╰+攻爆jí腚メ/ 2023年07月24日 02:05/ 0 赞/ 41 阅读

相关 vue项目引入全局vuex

Vuex 是一个全局的共享数据存储区域，相当于一个数据的仓库，Vuex是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到vuex中，而不必通过父子组

爱被打了一巴掌/ 2023年06月29日 13:59/ 0 赞/ 18 阅读

相关 vue项目中使用vuex

说明 > 此处仅做简单的记录，并没有详细的去整理。步骤 1、通过命令在项目根目录安装vuex npm install vuex --save-d

Dear 丶/ 2023年01月13日 05:57/ 0 赞/ 206 阅读

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

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

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

相关 vue项目中引入vuex

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5

今天药忘吃喽~/ 2022年09月09日 15:49/ 0 赞/ 304 阅读

相关 Vuex的使用（一）——在项目中引入Vuex

参考文档：https://vuex.vuejs.org/zh/guide/ 如果当前没有项目代码，可以访问[传送门][Link 1]搭建一个，以下Vuex相关功能都是在传送门

港控/mmm°/ 2022年09月09日 06:41/ 0 赞/ 246 阅读

相关在uni-app中使用vuex

新建文件在项目的根目录下新建一个store文件夹，然后在文件夹下新建一个index.js文件 ![在这里插入图片描述][20190326111653591.png]

比眉伴天荒/ 2022年02月28日 16:36/ 0 赞/ 410 阅读

相关在vue项目中引入vuex(全局状态管理器)

目录 Vuex是什么？ State Getter Mutation Action Module 项目结构 -------------------- V

灰太狼/ 2022年02月01日 01:13/ 0 赞/ 383 阅读

相关 Vuex学习(一) ——Vuex基础

Vuex学习(一) ——Vuex基础一、Vuex概述（一）组件之间共享数据的方法 (1)父向子传值：v-bind属性绑定 (2)子向父传值：v-on事件

r囧r小猫/ 2021年09月07日 07:34/ 0 赞/ 579 阅读

相关在vue项目中使用vuex

首先在npm中安装vuex npm install vuex --save ![clipboard.png][] 安装成功在vue项目目录下建立sto

朱雀/ 2021年07月27日 01:02/ 0 赞/ 490 阅读