vue学习笔记-----vuex

最新推荐文章于 2024-07-06 16:47:02 发布
最新推荐文章于 2024-07-06 16:47:02 发布
阅读量68 收藏
点赞数
分类专栏： VUE 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54614243/article/details/120658354
版权

1.什么是vuex？

官方给出的回答是

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
每一个 Vuex 应用的核心是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

可以理解为vuex主要进行状态管理，而且是共享状态管理，类似于全局对象的管理，但又不完全是。Vuex 和单纯的全局对象有以下两点不同：

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

  2. 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

接下来可以通过一些简单的例子去学习vuex。

2.安装vuex

在已有的vue项目中通过以下命令完成安装：

npm install vuex --save

其他方式可参考官方安装方式。
如果没有创建项目，通过以下命令创建：

vue init webpack vuex-demo

3.简单例子

将main.js 文件中的代码改为如下

import Vue from 'vue';
import Vuex from 'vuex';  // add code here
import App from './App';
import router from './router';

Vue.use(Vuex);  // add code here
Vue.config.productionTip = false;

// add code here(*first step)
const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increments(state) {
      // eslint-disable-next-line no-plusplus
      state.count++;
    },
  },
});

// add code here(*second and third step)
store.commit('increments');  
// eslint-disable-next-line no-console
console.log(store.state.count); // -> 1

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,  // add code here(*forth step)
  router,
  components: { App },
  template: '<App/>',
});

上述代码

  1. 通过 new Vuex.Store() 创建一个 store。
  2. 然后通过 store.commit 方法触发状态(state)改变。
  3. 最后通过 store.state 来获取状态对象。
  4. 为 Vue 实例提供创建好的 store。

再次强调，我们通过提交 mutation 的方式，而非直接改变
store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。

由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的
methods 中提交 mutation。

这是一个最基本的 Vuex 记数应用 (opens new window)示例。
但是可以发现，这个例子里面vuex和子组件没有任何的交互。
接下来看看vuex的容器store在子组件中如何使用。

1.State的使用

到这一步，我们已经把store挂载在根组件上了，子组件可以通过 t h i s . this. this.$ s t o r e store store去访问store对象。
也就是说在子组件中，我们可以通过 this.$store.state 去访问state。通常会搭配子组件的computed属性（methods也可以）去使用，子组件HelloWorld代码如下。

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click='addCount'>add count</button>
    <h1>{{ getCount() }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  computed: {
    count() {
      return this.$store.state.count;  // 返回count
    },
  },
  data() {
    return {
      localCount: 2,
    };
  },
  methods: {
    addCount() {
      this.$store.commit('increments');  // 通过commit改变count
    },
    getCount() {
      return this.$store.state.count;
    },
  },
};
</script>

当在computed中需要使用state中多个属性时候，可以使用辅助函数mapState()。

mapState会返回一个对象。
mapState函数中可以直接使用state，
相对于写this.$store.state代码简洁一些，
代码如下。

<template>
  <div>
    <h1>{{ count }}</h1>
    <h1>{{ countAlias }}</h1>
    <h1>{{ countPlusLocalState }}</h1>
    <h1>{{ localComputed }}</h1>
    <button @click='addCount'>add count</button>
    <h1>{{ getCount() }}</h1>
  </div>
</template>

<script>
import { mapState } from 'vuex';  // 引入mapState

export default {
  name: 'HelloWorld',
  computed: {
    localComputed() {
      return this.localCount;
    },
    // 使用辅助函数mapState
    ...mapState({
      // 箭头函数可使代码更简练
      count: state => state.count,

      // 传字符串参数 'count' 等同于 `state => state.count`
      countAlias: 'count',

      // 为了能够使用 `this` 获取局部状态，必须使用常规函数
      countPlusLocalState(state) {
        return state.count + this.localCount;
      },
    }),
  },
  data() {
    return {
      localCount: 2,
    };
  },
  methods: {
    addCount() {
      this.$store.commit('increments');
    },
    getCount() {
      return this.$store.state.count;
    },
  },
};
</script>

2.Getters的使用

首先现在main.js文件中向state添加一个todos属性，代码如下。

const store = new Vuex.Store({
  state: {
    count: 0,
    // 添加todos属性
    todos: [
      {
        id: 1,
        text: '...',
        done: true,
      },
      {
        id: 2,
        text: '...',
        done: false,
      },
    ],
  },
  mutations: {
    increments(state) {
      // eslint-disable-next-line no-plusplus
      state.count++;
    },
  },
});

考虑以下代码的doneTodosCount方法不只在一个子组件中使用，而是很多个子组件中都需要获取已完成todo的数目。

computed:{
  doneTodosCount() {
    return this.$store.state.todos.filter(todo=>todo.done).length;
  }
}

这时应该怎么办呢？可以在每个子组件中的computed都重复写一遍该方法，但这不是最佳的方法，因为这么做会使得结构耦合度高。

vuex在store中提供getters，可向外暴露，
通过this.$store.getters访问getters。
代码如下。
在main.js中向store添加getters。

const store = new Vuex.Store({
  state: {
    count: 0,
    todos: [
      {
        id: 1,
        text: '...',
        done: true,
      },
      {
        id: 2,
        text: '...',
        done: false,
      },
    ],
  },
  // add getters
  getters: {
    doneTodosCount(state) {
      return state.todos.filter(todo => todo.done).length;
    },
  },
  mutations: {
    increments(state) {
      // eslint-disable-next-line no-plusplus
      state.count++;
    },
  },
});

HelloWorld子组件中引用该方法。

<template>
  <div>
    <h1>{{ count }}</h1>
    <h1>{{ countAlias }}</h1>
    <h1>{{ countPlusLocalState }}</h1>
    <h1>{{ localComputed }}</h1>
    <button @click='addCount'>add count</button>
    <h1>{{ getCount() }}</h1>
    <!-- add code here -->
    <h1>{{ this.$store.getters.doneTodosCount }}</h1>
  </div>
</template>

类似于State的mapState，Getters也有辅助函数mapGetters()。
用法如下。

<template>
  <div>
    <h1>{{ count }}</h1>
    <h1>{{ countAlias }}</h1>
    <h1>{{ countPlusLocalState }}</h1>
    <h1>{{ localComputed }}</h1>
    <button @click='addCount'>add count</button>
    <h1>{{ getCount() }}</h1>
    <!--修改方法名称 -->
    <h1>{{ doneCount }}</h1> 
  </div>
</template>

<script>
// 引入mapGetters
import { mapState, mapGetters } from 'vuex';

export default {
  name: 'HelloWorld',
  computed: {
    localComputed() {
      return this.localCount;
    },
    ...mapGetters({
      // 重新命名函数
      doneCount: 'doneTodosCount',
    }),
    ...mapState({
      // 箭头函数可使代码更简练
      count: state => state.count,

      // 传字符串参数 'count' 等同于 `state => state.count`
      countAlias: 'count',

      // 为了能够使用 `this` 获取局部状态，必须使用常规函数
      countPlusLocalState(state) {
        return state.count + this.localCount;
      },
    }),
  },
  data() {
    return {
      localCount: 2,
    };
  },
  methods: {
    addCount() {
      this.$store.commit('increments');
    },
    getCount() {
      return this.$store.state.count;
    },
  },
};
</script>

3.Mutations的使用

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
Vuex 中的 mutation 非常类似于事件：
每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数(handler)。
这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

也就是说，当我们想要改变State中属性的值时候，

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

需要通过一下代码完成。

this.$store.commit('increment')

store.commit 可以传入额外的参数：

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读。
需要注意的是，Mutation 必须是同步函数。

辅助函数mapMutations()
可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
代码如下。

// 引入mapMutations
import { mapState, mapGetters, mapMutations } from 'vuex';

export default {
  name: 'HelloWorld',
  computed: {
    localComputed() {
      return this.localCount;
    },
    ...mapGetters({
      // 重新命名函数
      doneCount: 'doneTodosCount',
    }),
    ...mapState({
      // 箭头函数可使代码更简练
      count: state => state.count,

      // 传字符串参数 'count' 等同于 `state => state.count`
      countAlias: 'count',

      // 为了能够使用 `this` 获取局部状态，必须使用常规函数
      countPlusLocalState(state) {
        return state.count + this.localCount;
      },
    }),
  },
  data() {
    return {
      localCount: 2,
    };
  },
  methods: {
    // 使用mapMutations，将this.$store.commit('increments')映射到addCount方法上
    ...mapMutations({
      addCount: 'increments',
    }),
    getCount() {
      return this.$store.state.count;
    },
  },
};

4.Actions的使用

Actions与Mutations的使用基本是一样的，除了一下几点：

  1. mutaions只能进行同步操作，而actions同步异步操作都可以，主要用于处理异步操作。
  2. mutaions通过store.commit()触发，actions通过store.dispatch()触发。

5.Modules的使用

当store 对象变得复杂时，Vuex 允许将 store 分割成模块（module）。
每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一mutation 或 action 作出响应。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true
的方式使其成为带命名空间的模块。
当模块被注册后，它的所有 getter、action 及 mutation都会自动根据模块注册的路径调整命名。例如：

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,

      // 模块内容（module assets）
      state: () => ({ ... }), // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // 嵌套模块
      modules: {
        // 继承父模块的命名空间
        myPage: {
          state: () => ({ ... }),
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 进一步嵌套命名空间
        posts: {
          namespaced: true,

          state: () => ({ ... }),
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

启用了命名空间的 getter 和 action 会收到局部化的 getter，dispatch 和 commit。换言之，你在使用模块内容（module assets）时不需要在同一模块内额外添加空间名前缀。更改 namespaced 属性后不需要修改模块内的代码。

weixin_54614243
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue学习笔记，学习vue从0-1的步骤
09-21
vue的相关介绍 vuex的使用 vue-router的使用 springboot前后端的设计等
vue-tutorial：一些vue-tutorial-《 Vue学习笔记》
02-06
在“vue-tutorial”这个项目中，我们将会深入探讨Vue的基础知识以及与其相关的扩展技术，如Vuex状态管理库和vue-router路由管理器。 首先，让我们从Vue的核心概念开始。Vue通过声明式的模板语法使得数据绑定变得...
03-vuecli3.rar
11-06
Vue CLI 3 是一个强大的命令行工具，用于快速搭建 Vue.js 项目。它极大地简化了 Vue.js 应用程序的初始设置，提供了丰富的插件生态...学习 Vue CLI 3 的相关笔记将有助于深入理解这些概念，并有效地应用于项目开发中。
Vue开发-ma笔记demo
05-31
"Vue开发-ma笔记demo"很可能是某位开发者（ma）在学习或实践中创建的一个Vue项目示例，用来记录和展示Vue的使用方法和最佳实践。 在"Vue开发-ma笔记demo"中，我们可以预期包含以下几个关键知识点： 1. **Vue CLI**...
vue-cli+webpack记事本项目创建
08-30
【Vue CLI + Webpack 记事本项目创建详解】 在前端开发中，Vue.js 是一个非常流行的轻量级框架，而 Vue CLI 和 ...这个项目不仅提供了实际应用的体验，也是学习 Vue.js、Webpack、Vuex 和 Vue Router 的绝佳实践。
Vue3+Element-plus的表单重置
weixin_49352307的博客
07-04 333
1.创建表单,绑定表单数据对象model,并且每一表单需要绑定prop。作用:简化代码,重置表单数据。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1398
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 294
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
新建Vue工程的几种方法
黔肆的博客
07-04 299
新建vue工程的几种方法，关键词：@vue/cli ,vite , parcel , webpack
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 297
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
属性描述符初探——Vue实现数据劫持的基础
RenGJ010617的博客
07-05 955
属性描述符（Property Descriptor）在JavaScript中是一个特殊的对象，它定义了对象属性的行为和特性。 属性描述符有很多内容可以挖掘，比如defineProperty与Proxy的区别，比如vue2与vue3实现数据劫持的方式有什么不同，实现效果有哪些差异等，这篇博文只是入门，以后有时间再深挖。
vue2 中如何使用 vuedraggable 库实现拖拽功能
微光无限的博客
07-02 282
vue2 中如何使用 vuedraggable 库实现拖拽功能（详细Demo，容易理解）
vue 跳转新窗口的方法
m0_67880202的博客
07-03 302
适用于有新的完整的链接跳转，将新链接的url放入open中即可。2.使用$router.resolve。适用于@绑定了点击事件需要跳转的场景。1.使用router-link。
Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
weixin_41346436的博客
07-04 107
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。
Vue 文件下载
猫脸码客的博客
07-03 243
【代码】Vue 文件下载。
Vue 数据大屏适配
FitnessSnail的博客
07-02 286
不会因为在某一维度上缩放过大而导致元素在另一维度上超出视口。.dataScreen-content 盒子内容根据设计稿给的。（默认为 1920x1080）计算缩放比例，并。的缩放比例，那么元素可能会在某一维度上。，这在很多情况下是不希望发生的。的缩放比例的目的是为了保证。单位进行正常的布局就行。在水平和垂直方向上都。
【区分vue2和vue3下的element UI Badge 标记组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
07-03 620
在 Vue 2 和 Vue 3 中，Element UI 和 Element Plus 提供了类似的 Badge 标记组件，用于给元素一个额外的状态标识。不过，需要注意的是，在 Vue 2 中，我们通常使用 Element UI，而在 Vue 3 中，我们则使用 Element Plus。虽然这两个库的功能相似，但在一些属性和实现细节上可能存在差异。
关于ant design vue 使用Modal无法关闭弹窗的解决思路
weixin_44784401的博客
07-03 424
关于ant design vue 使用Modal无法关闭弹窗的解决思路node_modules/.pnpm/pinia@2.1.7_typescript@5.5.2_vue@3.2.33/node_modules/pinia/dist/pinia.mjs:6:9: 6 │ import { hasInjectionContext, inject, toRaw, watch, unref, markRaw, effectScope, ref, isVue2,
【VUE】 深入理解 Vue 动态路由：简介、实际开发场景与代码示例
九日的博客
07-04 360
在传统的路由配置中，我们需要在初始化 Vue 实例时定义所有的路由。但在实际应用中，特别是涉及权限管理、模块懒加载等场景，我们可能需要根据用户的权限或其它条件动态添加或修改路由。Vue Router 提供的动态路由功能正是为了解决这些问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值