vuex学习笔记

最新推荐文章于 2023-05-30 21:15:50 发布
最新推荐文章于 2023-05-30 21:15:50 发布
阅读量512 收藏
点赞数
分类专栏： 学习笔记 文章标签： 学习 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Stevetagelian/article/details/125193451
版权

安装

npm i vuex@版本

使用方式

//main.js
import App from "./App.vue";
import Vue from "vue";
//引入
import Vuex from "vuex";
//注册
Vue.use(Vuex);
//实例化vuex
const store = new Vuex.Store({
//写配置
//存放公用数据
state: {
    a: "hello store",
  },
});
new Vue({
  //挂载
  store,
  render: (h) => h(App),
}).$mount("#app");

<template>
  <div></div>
</template>

<script>
export default {
  created() {
    //如果成功打印一个对象，就说明成功了
    console.log('stroe: ',this.$store);
    console.log("state:a ", this.$store.state.a);
  }
};
</script>

state

概念

专门用来声明全局变量的地方

基本使用

配置state

const store = new Vuex.Store({
state: {
    a: "hello store",
  },
});

调用公共数据

<template>
  <div>{{$store.state.a}}</div>
</template>

优化使用

配置写法无变化

const store = new Vuex.Store({
state: {
    a: "hello store",
  },
});

调用时使用计算属性

<template>
  <div>{{ a }}</div>
</template>

<script>
export default {
  computed: {
    a() {
      return this.$store.state.a;
    },
  },
};
</script>

辅助函数的使用（mapState的使用）

  1. 配置不变

  2. 在组件中调用

    <template>
  <div>{{ a }}</div>
</template>

<script>
//引入
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    //通过扩展运算符把辅助函数数据的返回值结构到计算属性
    //中，从而获取state中的变量a
    ...mapState(["a"]),
  },
};
</script>

mutations

概念

专门用来修改state中的变量的对象（属性）

基本使用

1.写配置

state: {
    a: "hello store",
    count: 0,
  },
  mutations: {
    //state为固定形参
    addCount(state, num) {
      state.count += num;
    },
  },

2.组件调用

<template>
  <div>
    {{ count }}
    <button @click="$store.commit('addCount', 5)">点击我修改count值</button>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["a", "count"]),
  },
};
</script>

优化使用

1.配置不变

2.组件的调用

<template>
  <div>
    {{ count }}
    <!-- 通过事件处理来调用 -->
    <button @click="changeCount(5)">点击我修改count值</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
 
  computed: {
    ...mapState(["a", "count"]),
  },

  methods: {
    changeCount(num) {
      this.$store.commit("addCount", num);
    },
  },
};
</script>

辅助函数(mapMutations)

1.配置项不变

2.组件的调用

<template>
  <div>
    {{ count }}
    <button @click="addCount(5)">点击我修改count值</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },

  computed: {
    ...mapState(["a", "count"]),
  },

  methods: {
    //mutations的辅助函数要写在methods
    ...mapMutations(["addCount"]),
  },
};
</script>

actions

概念

通过异步操作，调用mutations中的函数，从而改变state中的变量

基本使用

1.写配置

const store = new Vuex.Store({
  //写配置
  state: {
    a: "hello store",
    count: 0,
  },
  mutations: {
    addCount(state, num) {
      state.count += num;
    },
  },
  actions: {
    addAsyncCount(store, num) {
      //store内置的参数，指的是Vuex.Store的实例化对象store
      setTimeout(() => {
        store.commit("addCount", num);
      }, 1000);
    },
  },
});

2.组件的调用

<template>
  <div>
    {{ count }}
    <button @click="$store.dispatch('addAsyncCount', 5)">
      点击我修改count值
    </button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["a", "count"]),
  },
};
</script>

优化使用

1.配置项不变

2.组件的调用

<template>
  <div>
    {{ count }}
    <button @click="ayncChangeCount(5)">点击我修改count值</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["a", "count"]),
  },

  methods: {
    ayncChangeCount(num) {
      this.$store.dispatch("addAsyncCount", num);
    },
  },
};
</script>

辅助函数

1.配置项不变

2.组件的调用

<template>
  <div>
    {{ count }}
    <!-- 直接使用 -->
    <button @click="addAsyncCount(5)">点击我修改count值</button>
  </div>
</template>

<script>
//引入mapActions
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["a", "count"]),
  },

  methods: {
    //解构
    ...mapActions(["addAsyncCount"]),
  },
};
</script>

getters

概念

除了state可以声明全局变量之外，还可以利用getters声明全局变量，只不过getters声明的变量是从state派生出来的，getters就相当于Vue中的computed属性

基本使用

1.配置

const store = new Vuex.Store({
  state: {
    list: [1, 2, 3, 4, 5],
  },
  //写配置
  getters: {
    filterList: (state) => {
      return state.list.filter((item) => item >= 3);
    },
  },
});

2.组件的调用

<template>
  <div>
    {{ $store.getters.filterList }}
  </div>
</template>

<script>
export default {
};
</script>

优化使用

辅助函数

1.配置不变

2.组件的调用

<template>
  <div>
    {{ countHandle }}
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["countHandle"]),
  },
};
</script>

module

概念

为了能够分模块管理我们的全局变量，这样有利于项目的后期维护

使用方式

1.写配置

const store = new Vuex.Store({
  modules: {
    user: {
      state: {
        token: "123",
      },
    },
  },
});

2.组件的调用

<template>
  <div>
    <!-- $store.state.模块名.属性名 -->
    {{ $store.state.user.token }}
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
};
</script>

简化使用

1.配置项

const store = new Vuex.Store({
  getters: {
    token(state) {
      return state.user.token;
    },
  },
  },
  modules: {
    user: {
      state: {
        token: "123",
      },
    },
  },
});

2.组件的调用

<template>
  <div>
    {{ token }}
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["token"]),
  },
};
</script>

注意

  • 默认情况下,mutations,actions,getters声明的变量或者函数都是直接挂载到全局的命名空间中的
  • 在模块名内添加namespace属性可以使mutations,actions,getters存在局部空间内

module中的局部state

1.配置

const store = new Vuex.Store({
  getters: {
    token(state) {
      return state.user.token;
    },
  },
  modules: {
    user: {
      namespaced: true,
      state: {
        token: "123",
      },
    },
  },
});

2.组件的调用

<template>
  <div>
    {{ token }}
    <button></button>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["token"]),
  },
};
</script>

module中的局部mutations

1.写配置

const store = new Vuex.Store({
  getters: {
    token(state) {
      return state.user.token;
    },
  },
  modules: {
    user: {
      namespaced: true,
      state: {
        token: "123",
      },
      mutations: {
        changeToken(state, string) {
          state.token = string;
        },
      },
    },
  },
});

2.组件的调用

<template>
  <div>
    {{ token }}
    <button @click="changeToken('13456')">点击修改</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },

  computed: {
    ...mapGetters(["token"]),
  },
  methods: {
    //注意
    ...mapMutations("user", ["changeToken"]),
  },
};
</script>
<style lang="scss" scoped></style>

module中的局部actions

1.配置

const store = new Vuex.Store({
  getters: {
    token(state) {
      return state.user.token;
    },
  },
  modules: {
    user: {
      namespaced: true,
      state: {
        token: "123",
      },
      mutations: {
        changeToken(state, string) {
          state.token = string;
        },
      },
      actions: {
        asyncChangeToken(store, string) {
          setTimeout(() => {
            store.commit("changeToken", string);
          }, 500);
        },
      },
    },
  },
});

2.组件的调用

<template>
  <div>
    {{ token }}
    <button @click="asyncChangeToken('13456')">点击修改</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    ...mapGetters(["token"]),
  },
  methods: {
    ...mapMutations("user", ["changeToken"]),
    ...mapActions("user", ["asyncChangeToken"]),
  },
};
</script>

module中的局部getters

1.配置

const store = new Vuex.Store({
  getters: {
    token(state) {
      return state.user.token;
    },
  },
  modules: {
    user: {
      namespaced: true,
      state: {
        token: "123",
      },
      getters: {
        tokenGetter(state) {
          return state.token + "789";
        },
      },
    },
  },
});

2.组件的调用

<template>
  <div>
    {{ tokenGetter }}
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters("user", ["tokenGetter"]),
  },
};
</script>
Stevetagelian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuex个人学习笔记代码
04-16
vuex个人学习笔记代码
vuex getters和mapGetters不更新的问题
热门推荐
_程昊的博客
03-26 1万+
在compents里面commit了state也更新了，但是getters和mapGetters却没有更新,显示undefined vuex代码: import {setCode, getCode} from '@/utils/api' import Vue from 'vue' const user = { states: { code: getCode(), current...
关于vuex的学习实践笔记
12-12
Vuex 简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 例如(travel store)： import * as types from '../types' //数据 const state = { travelsList: [], searchKey: { page: 0, limit: 20 }, scroll: true } //用户行为(可以处理异步),触发 mutations 来改变 state const actions = { /**
使用Vuex实现一个笔记应用的方法
11-28
最近开始着手学习 Vue，先大略的过了一遍官方文档，跟着敲过一部分官方文档中的 DEMO，然而还是不甚了了。在网上找到了一个入门的笔记应用，即便是入门级的应用，在学习途中依旧困难重重。特将学习作此笔记，方便今后回看，也希望能够帮到刚开始学习 Vue 的女同学 附原作者 Github 链接：https://github.com/lichenbuliren/vuex-notes-app2 预期目标 笔记具备如下基本功能 1.新增 2.删除 3.收藏 4.在全部笔记和收藏笔记间切换 5.在当前列表中进行搜索 卖家秀 买家秀 准备工作 1.新建项目 选个文件夹存放项目，这里我用的是 G
用Vuex构建一个笔记应用
02-24
在这个教程里面，我们会通过构建一个笔记应用来学习怎么用Vuex。我会简单地介绍一下Vuex的基础内容，什么时候该用它以及用Vuex的时候该怎么组织代码，然后我会一步一步地把这些概念应用到这个笔记应用里面。这个是我们要构建的笔记应用的截图：你可以从下载源码，这里是的地址。Vuex是一个主要应用在中大型单页应用的类似于Flux的数据管理架构。它主要帮我们更好地组织代码，以及把应用内的的状态保持在可维护、可理解的状态。如果你不太理解Vue.js应用里的状态是什么意思的话，你可以想象一下你此前写的Vue组件里面的data字段。Vuex把状态分成组件内部状态和应用级别状态：组件内部状态：仅在一个组件内使
改变请求头传值的内容
qq_43780814的博客
06-23 472
页面中 1.导入vuex import { mapGetters, mapMutations } from 'vuex' 2.mapGetters，从vuex里拿数据（me接口的数据） computed: { ...mapGetters(['isBusiness', 'projects', 'business', 'currentProject', 'currentBusiness']), }, 3.调用方法改变请求头的值 created() { this.SET_CURRENTPROJECT(
vuex getters和mapGetters 视图不更新的问题
qq_26642611的博客
04-27 2829
import { getInfo } from "@/api/user"; import Vue from "vue"; const state = { ExchangePointMinLimitValue: "" }; const mutations = { SET_EXCHANGEPOINTLIMITVALUE: (state, exchangepointminlimitva...
vuex——计算属性获取的getter值需要刷新才能更新
Juliet_xmj的博客
03-31 1996
vuex——计算属性获取的getter值需要刷新才能更新 描述： // state state: { leader: null }, // getters getters: { getLead: state => state.leader } // mutations mutations: { setLead (state, data) { state.leader = data } }, // 页面中赋值 // 登录时改变state.le
vuex怎么改变state里面的值
weixin_42612405的博客
01-05 947
在 Vuex 中，你可以通过提交 mutation 来改变 state 中的值。 首先，你需要在 store 中定义 mutation： const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { // 变更状态 state.count+...
vue之vuex的getters详解
qq_45061876的博客
03-13 3291
getters：类似是Vuex中的计算属性，也具有缓存功能：如果state中的数据得到了改变，那么getters中的属性的值也会发生改变，如果state的值没有发生任何变化，那么getters中的属性，的值就不会发生改变。（3）之后可以再APP页面，对过滤出的数据进行使用，渲染页面，有两种方式，一种change方式一种computed方式。（5）在action里存放异步请求，如果异步请求再mutation里写，数据会乱。（4），如果需要修改state状态，统一在mutations里面进行修改，
关于Vuex中使用mapGetters的应用以及项目实例演示以及gettes从接口获取内容更新
m0_59157023的博客
05-30 1110
getters文件来自app.js文件，以下 我需要的变量由于是取自后台接口。今天在项目中看到了Vuex，以及看到了mapGettes的使用。在src->store->index.js文件中。什么getters对象，然后增加我需要的变量。如果我需要在我应用文件修改这个变量。在我应用文件xxx.vue中。同时导出getters变量。哈喽，小伙伴们大家好啊。
Vue学习笔记（3）
wangjiefront的博客
10-29 177
一、nextTick 1、是什么：在Vue中，下一次DOM更新结束后执行其指定的回调的API 2、为什么：由于Vue在数据驱动视图更新时，并不都是每次一改变数据就马上更新视图，因 此改变数据后，如果要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函 数中执行这些操作。 3、语法：this.$nextTick(回调函数) ...
vuex-mapGetters使用案例解析
caoxinjian423的博客
10-09 2962
store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { msg:"Hello Vuex!", name:"cxj", age:18, hobby:"美女" }, getters: { tenYearsOld(state){ return state.age + 1
vuex中mapGetters,mapActions使用
Xwz的博客
04-27 2751
vuex运行流程图如下 1.Vue Components 是我们的 vue 组件，组件会触发（dispatch）一些事件或动作，也就是图中的 Actions 2.我们在组件中发出的动作，肯定是想获取或者改变数据的，但是在 vuex 中，数据是集中管理的，我们不能直接去更改数据，所以会把这个动作提交（Commit）到 Mutations 中 3.然后 Mutations 就去改变（Mutate）State 中的数据； 4.当 State 中的数据被改变之后，就会重新渲染（Render）到 Vu
vue: 解决vuex页面刷新数据丢失问题
ZHU20200222的博客
03-27 269
vue:解决vuex页面刷新数据丢失问题 一、问题描述 1、一般在登录成功的时候需要把用户信息，菜单信息放置vuex中，作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被清空。 2、我在一个组件（例如登录组件页面）中登录了后，其它页面要怎么获取和响应这个变化，使用通过计算属性实现响应数据的变化，mapGetters获取vuex comp...
【vue3生态Pinia之State、Getters、Actions详解】
从今年开始写写博客~~
02-24 9573
涉及内容：$reset()重置、$patch修改、$state更换、$subscribe订阅、getter：state中的computed、Actions：相当于组件中的 methods、订阅actions、销毁订阅、访问其他Store。 Getters 1- Getter 完全等同于Store里的state的computed值。 2- 他们接收state作为第一个参数，鼓励使用箭头函数功能： 3- 外部(组件)将参数传递给 getter 4- 访问其他store的getters
vuex 组件中如何使用和修改 state 与 getter数据
NancyFyn的博客
05-21 4146
组件中如何使用 state 与 getter 方案一、使用挂载到 Vue原型上的 $store 对象。这个 $store 就是 new Vuex.Store() 生成的仓库实例对象 方案二 (推荐)、使用 computed <script> export default { computed: { curCity() { return this.$store.state.curCity; }, cart() { return this.$sto
Vuex的状态管理基础及Vue devtool插件安装
米儿的博客
08-07 791
什么是状态管理 在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需要保存在我们应用程序中的某一个位置，对于这些数据的管理我们就称之为是 状态管理。 在前面我们是如何管理自己的状态呢？ 在Vue开发中，我们使用组件化的开发方式； 而在组件中我们定义data或者在setup中返回使用的数据，这些数据我们称之为state； 在模块template中我们可以使用这些数据，模块最终会被渲染成DOM，我们称之为View； 在...
vue3 + vite + ts + setup , 第十五练 vue3 中使用pinia (二) 如何使用getters、actions、 $reset、$subscribe、$onAction
csl125的博客
07-16 3304
vue3中使用pinia,getter和actions的使用
尚硅谷vue学习笔记
最新发布
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、指令等。 2. 组件化开发：学习如何创建和使用Vue组件，掌握组件之间的通信方式，包括props和事件。 3. 路由管理：学习使用Vue Router实现前端路由，实现单页应用的页面跳转和导航。 4. 状态管理：掌握Vuex的使用，实现全局状态管理和数据共享。 5. 表单处理：学习如何使用Vue表单指令和表单验证，处理用户输入和表单提交。 6. HTTP请求：了解Vue中常用的HTTP库，如axios，进行数据的异步请求和处理。 7. 生命周期：理解Vue生命周期钩子函数的执行顺序和作用，掌握组件的生命周期管理。 8. Vue3新特性：了解Vue3的新特性，如Composition API、Teleport、Fragments等。 尚硅谷还提供了一些实战项目，如电商平台、博客系统等，可以通过完成这些项目来巩固所学的知识。 以上是一些关于尚硅谷Vue学习笔记的要点，希望对你有所帮助！如果有更具体的问题，欢迎继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值