vue 中的vuex数据框架使用

缺乏、安全感 2021-12-12 14:05 318阅读 0赞

vue 只能承担视图层的主要类容

vuex 数据框架  大量数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70][]

1.安装

npm install vuex --save

1.1在main.js中引入：import store from './store/store'

1.2注册使用store

new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

2.创建store.js  内容如下：

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        city: '北京'
      }
    })

3.在.vue视图页面使用‘北京’：\{ \{this.$store.state.city\}\}

4.在.vue页面中事件触发并传参city

methods: {
        handlecityclick: function (city) {
          this.$store.dispatch('changecity', city)
        }
      }

5.在.js页面感知到changecity事件的触发，然后去调用change事情，在事件中对city做改变

export default new Vuex.Store({
      state: {
        city: '北京'
      },
      actions: {
        changecity: function (ci, city) {
          ci.commit('change', city)
        }
      },
      mutations: {
        change: function (state, city) {
          state.city = city
        }
      }
    })

5.1可以省略掉actions对象中的事件，直接进入mutations去改变

.vue

methods: {
        handlecityclick: function (city) {
          this.$store.commit('changecity', city)
        }
      }

.js

export default new Vuex.Store({
      state: {
        city: '北京'
      },
      mutations: {
        changecity: function (s, city) {
          s.city = city
        }
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70]: /images/20211211/1c68732fe6264639a4a38fa97c7d22f1.png

发表评论取消回复

表情：

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

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

相关阅读

相关 VUE框架使用VueX实现携带信息------VUE框架

> npm install vuex@3 > > npm install vuex@3 > import Vue from "vue"; > imp

逃离我推掉我的手/ 2024年02月25日 03:58/ 0 赞/ 44 阅读

相关 vuex在vue-cli中的使用

第一步：安装vuex资源包 `npm install vuex --save` 第二步：在src/main.js中引入（我这里是单独建立的一个store文件来放vue

喜欢ヅ旅行/ 2023年08月17日 16:00/ 0 赞/ 142 阅读

相关 vue项目中使用vuex

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

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

相关 vue中的共享数据管理---vuex

引言 vuex是关于对vue中一些多个组件共享的数据进行统一集中式管理的方法。在实际的前端开发中，为了减少重复代码的使用，通常我们会把重复使用的代码，封

柔情只为你懂/ 2022年12月30日 13:56/ 0 赞/ 301 阅读

相关 vue-vuex的使用

Vuex是一个专为Vue.js应用程序开发的状态管理模式，为多个组件共享状态的插件状态–>变量需要共享的状态才需放入Vuex中 > npm i xxx --sav

今天药忘吃喽~/ 2022年11月30日 13:00/ 0 赞/ 132 阅读

相关 Vue3 中使用Vuex

[vue3.x使用vuex\_small streamed bun-CSDN博客\_vue3 vuex][vue3.x_vuex_small streamed bun-CSDN

骑猪看日落/ 2022年09月11日 10:13/ 0 赞/ 222 阅读

相关 vue 中的vuex数据框架使用

vue 只能承担视图层的主要类容 vuex 数据框架大量数据 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

缺乏、安全感/ 2021年12月12日 14:05/ 0 赞/ 319 阅读

相关 vue - 将数据存入vuex中以及从vuex中取出数据

1、在store文件下面新建文件 print.js ，写入以下代码 / 存放数据 /

曾经终败给现在/ 2021年09月29日 09:36/ 0 赞/ 1223 阅读

相关 Vue中的Vuex

目录一，vuex介绍二，vuex计数器案例三，vuex的getter 四，vuex的辅助函数五，使用vuex时表单的处理六，vuex中分模块开发 ---

ゝ一纸荒年。/ 2021年08月19日 20:07/ 0 赞/ 460 阅读

相关 Vue - Vuex的使用

Vuex的使用 1. Vuex 是什么？ 2. 使用 Vuex 统一管理状态的好处 3. 什么样的数据适合存储到 Vuex 中 4. Vuex 的

本是古典何须时尚/ 2021年07月25日 20:36/ 0 赞/ 519 阅读