Vuex 的简单使用样例

最新推荐文章于 2022-08-06 16:08:48 发布
最新推荐文章于 2022-08-06 16:08:48 发布
阅读量95 收藏
点赞数
分类专栏： 前端编程 JS 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45371853/article/details/118730707
版权
使用 vue 进行计数器的计数

代码可以直接复制使用，欢迎大家交流指正

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>

    <div id="app">
        <p>更新计数{{count}}</p>
        <button @click="add">+</button>
        <button @click="sub">-</button>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                count: 0
            },
            methods: {
                add: function () {
                    this.count++
                },
                sub: function () {
                    this.count--
                }
            }
        })
    </script>

</body>
</html>
借用 Vuex 进行
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>

    <div id="app">
        <p>更新计数{{count}}</p>
        <button @click="add">+</button>
        <button @click="sub">-</button>
    </div>

    <script>
        var store = new Vuex.store({
            state:{
                count:0
            },
            mutationds:{
                addState:function(){
                    state.count++
                },
                subState:function(){
                    state.count--
                }
            }
        })

        var vm = new Vue({
            el: "#app",
            store,
            // data: {
            //     count: 0
            // },
            computed:{
                count:function(){
                    return this.$store.state.count
                }
            },
            methods: {
                add: function () {
                    // this.count++
                    store.commit("addState")
                },
                sub: function () {
                    // this.count--
                    store.commit("subState")
                }
            }
        })
    </script>

</body>

</html>
Vuex介绍：

在这里插入图片描述

Vuex 执行流程

在这里插入图片描述

前端小趴菜_JL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuex 基本简单的使用
X W F
05-08 127
文章目录适用场景如何在项目中使用vuexthis.$store.state.数据名称的调用.vue组件调用：(第一种直接使用).vue组件调用：(第二种导入辅助函数)页面直接使用mutations:如果要修改state的数据需要在store中调用方法全局定义使用：调用辅助函数mapMutations调用方法：组件展示：getters的使用（相当于计算属性）： 适用场景 全局共享数据，抛开繁琐的组...
Vuex的使用示例
海阔天空
04-09 360
Vuex的使用示例
【Vue】Vuex 用法案例（一篇足以）
qq_45677671的博客
08-06 916
vuex 各种属性、方法的使用案例
Vuex完整示例代码
wang_xiao_ye的博客
05-31 926
Vuex完整示例代码
超简单入门Vuex小示例
ccf19881030的专栏
05-15 717
写在前面 本文转载自掘金上面的一篇博客，原文地址为： 超简单入门Vuex小示例 本文旨在通过一个简单的例子，练习vuex的几个常用方法，使初学者以最快的速度跑起来一个vue + vuex的示例。 学习vuex需要你知道vue的一些基础知识和用法。相信点开本文的同学都具备这个基础。 另外对vuex已经比较熟悉的大佬可以忽略本文。 生成基于vue的项目 前提是在自己的系统中安装好了Node.js、npm、cnpm等工具，并且配置好了相关的环境变量，然后选择一个趁手的IDE编辑器，我使用的是VSCode。 基于v
Vue之Vuex详解与实例
DJun的博客
12-27 1万+
① 在组件（页面）中，通过dispatch()或mapActions()这个函数分发给actions的函数去处理。 ② actions的函数可以与后台交互，也可以通过 commit() 提交给mutations去处理。 ③ mutations 可以直接与devtool（如本地存储工具 → 在实例代码中的utils里的storageUtils.js）交互与直接更新state（数据状态）。 ④ 如果有计算属性（get函数写在getters里面），则状态通过getters的$store.getters()或
Vuex详解
热门推荐
猫老板的豆
06-12 3万+
一、简介 我们来看看对Vuex比较专业的介绍： Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 简而言之，Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果想修改这个全局对象的数据，得按照Vuex提供的方式来修改（不能自己随意用自己的方式来修改）。 二、优点 Vu...
vuex 的简单使用
10-18
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式及存储库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则确保状态以...通过学习和掌握 Vuex 的简单使用，你可以更有效地构建大型的 Vue.js 应用程序。
简单的vuex 的使用案例笔记
08-27
本文主要介绍了简单的 Vuex 使用案例笔记，通过 demo 展示了如何使用 Vuex 实现 app 的模式切换，选择是夜间模式还是白天模式。 一、Vuex 的基本概念 Vuex 是一个状态管理模式，用于管理应用程序的状态。它可以将...
vuex的简单使用教程
10-18
vuex是一个专门为vue.js设计的集中式状态管理架构。这篇文章主要介绍了vuex的简单使用,需要的朋友可以参考下
详解vuex的简单使用
08-27
vuex 简单使用详解 Vuex 是一种状态管理模式，用于管理应用程序中的状态。它将整个应用程序的状态集中管理，提供了一个单一的状态树，来统一管理应用程序的状态。 1. 目录配置 根据官方推荐，在 `src` 目录下创建...
vue项目 vuex store企业示例
weixin_46337813的博客
02-26 169
import Vue from 'vue' import Vuex from 'vuex' import app from './modules/app' import user from './modules/user' import tagsView from './modules/tagsView' import permission from './modules/permission' import settings from './modules/settings' import getter.
5.13 Vuex 的使用以及案例
毛毛的博客
05-13 512
vuex基础-介绍 为什么会有Vuex ? ​ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用**集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测**的方式发生变化。 vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 结论 修改state状态必须通过**mutations** **mutations**只能执行同步代码，类似ajax，定时器之类的代
Vuex的使用样例
不积跬步，无以至千里；不积小流，无以成江海。
04-08 99
样例 <template> <div class="hello"> <p>{{ count }}</p> <p> <button @click="increment">+</button> <button @click="decrement">-</button> </p> </div> </template
简单的vuex使用示例
piaoyangde的博客
02-11 1475
vuex使用的简单示例
vuex的使用：state，actions，getters，mutations，mapState，mapGetters，mapMutations ，mapActions
Crazy_GirlLL的博客
03-12 396
转自：https://www.cnblogs.com/mica/p/10757965.html 怎么安装 Vuex 我就不介绍了，官网上有 就是 npm install xxx 之类的。（其实就是懒~~~哈哈） 那么现在就开始正文部分了 众所周知 Vuex 是什么呢？是用来干嘛的呢？ Vuex 是一个专为 Vue.js 应用程序开发的`状态管理模式`。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 例如：你有几个数据，几个操作，在多个组件上都需要使用，
一篇搞定Vuex(含代码示例)
技术圈
10-26 246
vue通信总结 父对子：v-bind 子对父：v-on 兄弟组件之间：EventBus $on 接收数据的那个组件 $emit 发送数据的那个组件 Vuex是实现组件全局状态管理的一种机制，可以方便的实现组件数据共享。 使用全局store管理 Vuex 统一状态管理 数据集中管理，易于开发和后期维护 高效实现数据共享，提高开发效率 存储vuex中的数据是响应式的，能够实时保持数据与页面的同步 Vuex基础使用 构建store.js import Vue from 'vue' import Vuex from
Vuex入门与使用案例
weixin_57504000的博客
05-14 2765
目录 一、组件之间的传值方式 1.父子组件 2.非父子组件或父子组件 3.非父子组件或父子组件 二、Vuex介绍 三、Vuex安装与配置 1.下载 2.配置 1.在src目录下创建store模块，分别维护state/actions/mutations/getters 2.在index.js中引入vue和vuex 3.新建vuex的store实例 4.在main.js中导入并使用store实例 四、Vuex的简单使用 1.创建案例页面 2.往state.js中加入全...
flex和grid布局的差别
qq_45371853的博客
10-21 5821
flex 布局 什么是 flex 布局 全成 flexible Box 意为弹性盒子。 弹性盒子是 CSS3 的一种新的布局模式。相对于传统的依赖于display+position+float的布局方式，弹性盒子更加以有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 如何使用 // 任何一个容器都可以指定为Flex布局，你需要的仅仅是增加一行 display: flex; // 如果是行内元素的话则是 display: inline-flex; 注意，设为 Flex 布局以后，子元素的fl
vuex的使用
最新发布
06-01
Vuex是Vue.js的官方状态管理库，用于管理Vue.js应用程序中的共享状态。Vuex将应用程序的状态存储在一个集中的地方，使得状态的变化变得可预测和易于调试。下面是Vuex的使用步骤： 1. 安装Vuex 可以使用npm或者yarn来安装Vuex。在终端中输入以下命令： ``` npm install vuex --save ``` 2. 创建store 在Vue.js应用程序中创建store。新建一个store.js文件，然后导入Vue和Vuex并创建一个store对象： ``` import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }, actions: { incrementAsync({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } }) export default store ``` 在上面的代码中，我们定义了一个state对象来存储我们的数据（这里只有一个count属性）。我们还定义了一个mutation对象来修改state中的数据。最后，我们还定义了一个action对象来触发mutation中的方法。 3. 在Vue组件中使用store 在Vue组件中使用store来获取或修改数据、触发action等。可以使用Vue.js提供的mapState、mapMutations、mapActions等辅助函数来简化代码。例如： ``` <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="incrementAsync">Increment Async</button> </div> </template> <script> import { mapState, mapMutations, mapActions } from 'vuex' export default { computed: { ...mapState(['count']) }, methods: { ...mapMutations(['increment']), ...mapActions(['incrementAsync']) } } </script> ``` 在上面的代码中，我们使用了mapState来将store中的count属性映射到组件的computed属性中。我们还使用了mapMutations和mapActions来将mutation和action方法映射到组件的methods中。这样，我们就可以直接在组件中使用increment和incrementAsync方法来修改state中的数据了。 以上就是Vuex的使用步骤。当然，Vuex还有很多其他的功能，比如getters、modules等，可以根据实际需求来使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值