Vuex 基础和使用

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量134 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66744745/article/details/125209918
版权

Vuex：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

一.vuex基本使用

  • 下载
  • 引入
  • 注册
  • 实例化vuex 初始化vuex对象
  • 挂载
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 7
  }
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

二.state

1.概览：

大白话：声明在state上的变量，就相当于全局变量，可以在任意vue文件中访问到

官方术语：state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中

作用：共享状态数据

2.原始形式- 插值表达式：
  • 组件中可以使用 this.$store 获取到vuex中的store对象实例，可通过state属性属性获取count
<template>
  <div>
    <h1>count:{{ $store.state.count }}</h1> //7
  </div>
</template>
3.计算属性 - 将state属性定义在计算属性中
<template>
  <div>
    <router-view></router-view>
    <h2>{{ count }}</h2>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  //state变量的优化使用
  computed: {
    //把state中的数据，定义到组件内的计算属性
    count() {
      return this.$store.state.count;
    },
  },
};
</script>
4.辅助函数 - mapState
  • 第一步：导入mapState
  • 第二步：采用数组形式引入state属性
  • 第三步：利用延展运算符将导出的状态映射给计算属性
<template>
  <div>
    <h2>{{ count }}</h2>
  </div>
</template>
<script>
//导入mapState
import { mapState } from "vuex";
export default {
  //state变量的优化使用
  computed: {
  //利用延展运算符将导出的状态映射给计算属性
  //采用数组形式引入state属性
    ...mapState(["count"]),
  },
};
</script>
5.使用场景

当一个变量需要在多个vue文件中使用的时候，此刻这个变量可以声明在state中成为一个全局变量

三.mutations

1.概念：

大白话：mutations是专门用来修改state中的变量的对象（属性）

官方术语：state数据的修改只能通过mutations，并且必须是同步更新（也就是里面不能有异步代码），目的是形成数据快照

2.原始形式- $store

新建组件，内容为一个button按钮，点击按钮调用mutations

import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 7
  },
  mutations: {
    //state:这是个内置参数
    //指得是mutations同级的state属性
    //five：调用函数时传入的参数
    addcount(state, five) {
      state.count += five
    }
  }
})

<template>
  <div>
    <h2>{{ count }}</h2>
    <!-- 调用mutations中的函数，必须通过commit方法进行调用
    语法：$store.commit（"需要调用的函数"，传给调用函数的值）-->
    <button @click="$store.commit('addcount', 5)">加五</button>
  </div>
</template>
3.事件处理函数-this.$store
<template>
  <div>
    <h2>{{ count }}</h2>
    <button @click="changecount(10)">加十</button>
  </div>
</template>
<script>
export default {
  methods: {
    //定义事件处理函数来修改state的值
    changecount(numb) {
      this.$store.commit("addcount", numb);
    },
  },
};
</script>
4.辅助函数 - mapMutations
  • 第一步：导入mapMutations
  • 第二步：采用数组形式引入mutations
  • 第三步：利用延展运算符将导出的状态映射给methods
<template>
  <div>
    <router-view></router-view>
    <h1>count:{{ $store.state.count }}</h1>
        <button @click="addcount(50)">加五十</button>
</template>
<script>
//1.引入辅助函数 mapMutations
import { mapState, mapMutations } from "vuex";
export default {
      methods: {
    //2.通过辅助函数引入addcount函数，并把addcount解构到methods中
    ...mapMutations(["addcount"]),
      }
}
</script>
5.使用场景

当我们需要修改state中变量的值的时候，此刻需要用到mutations

注意：mutations只能同步修改

四.actions

1.概念：

大白话：action就是可以通过异步操作，通过调用mutations中的函数，从而修改state中的值

官方术语：state是存放数据的，mutations是同步更新数据的，actions则辅助进行异步操作的

2.原始形式- $store
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 7
  },
  mutations: {
    //state:这是个内置参数
    //指得是mutations同级的state属性
    //five：调用函数时传入的参数
    addcount(state, five) {
      state.count += five
    }
  },
  actions: {
    Asynccount(store, numb) {
      //store:内置的参数，指的是Vue.Store的实例
      setTimeout(() => {
        //因为store已经通过参数可以获取到了
        //因此这里可以直接通过store调用commit方法
        store.commit("addcount", numb)
      }, 1000);
    }
  }
})

<template>
  <h2>{{ count }}</h2>
    <!-- 调用actions中的函数，必须通过dispatch方法调用
    语法：$store.dispatch("调用函数名"，传递给函数的值) -->
  <button @click="$store.dispatch('Asynccount', 1000)">加一千</button>
</template>
3.事件处理函数-this.$store
<template>
  <h2>{{ count }}</h2>
  <button @click="change(6)">加六</button>
</template>
<script>
export default {
      methods: {
    change(numb) {
      this.$store.dispatch("Asynccount", numb);
    }, 
}
</script>
4.辅助函数 - mapActions
  • 第一步：导入mapActions
  • 第二步：采用数组形式引入actions
  • 第三步：利用延展运算符将导出的状态映射给methods
<template>
  <div>
    <h1>count:{{ $store.state.count }}</h1>
    <button @click="Asynccount(20)">加二十</button>
</template>
<script>
//1.引入辅助函数 mapMutations
import { mapState, mapMutations ,mapActions }from "vuex"
export default {
      methods: {
    //2.通过辅助函数引入mapActions并把Asyncconunt解构到methods中
   	 ...mapActions(["Asynccount"]),
      }
}
</script>
5.使用场景

当我们需要修改state中变量的值的时候，此刻需要用到actions

注意：actions异步修改的时候才需要用到

五.gerters

1.概念：

大白话：除了state可以声明全局变量外，还可以利用gerters声明全局变量，只不过getters声明的变量从state派生出来的，getters就相当于vue中的computed计算属性

官方术语：除了state之外，有时候我们还需要从state中派生出一些状态，这些状态依赖state，此时会用到getters

2.原始形式- $store
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
        //需求：页面中需要用到state中和list数组中大于5的数据
  getters: {
         //声明变量，值是个函数，这个函数必须有返回值
    getlist: (state) => {
        //state：内置参数，指的是和getters同级的state属性
      return state.list.filter(item => item > 5)
    }
  }

})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

<template>
  //使用getters数据
   <p>{{ $store.getters.getlist }}</p>
</template>
3.优化 - 计算属性
<template>
  <div>
    <h1>{{ changelist }}</h1>
  </div>
</template>

<script>
export default {
 //通过计算属性来显示getters里面的数据
  computed: {
    changelist() {
      return this.$store.getters.changelist;
    },
  },
};
</script>
4.辅助函数 - mapGetters
<template>
  <div>
    <h1>{{ changelist }}</h1>
  </div>
</template>

<script>
//1.引入辅助函数
import { mapGetters } from "vuex";
export default {
  //通过计算属性来显示getters里面的数据
  computed: {
    // 2.解构
    ...mapGetters(["changelist"]),
  },
};
</script>
5.使用场景

简化state值的获取

六.module

1.概念：

大白话：分模块管理我们的全局变量，这样有利于项目的后期维护

官方术语：由于单一状态树，应用的所有状态集中在一个比较大的state对象中，当应用变的复杂的时候，代码就变得相当臃肿了，vuex会变得越来越难维护，因此就有了vuex的模块化

2.模块化的简单应用：
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0,
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
  mutations: {
    addcount(state, num) {
      state.count += num
    }
  },
  actions: {
    Aoscount(store, num) {
      setTimeout(() => {
        store.state.count += num
      }, 1000);
    }
  },
  getters: {
    changelist(state) {
      return state.list.filter(item => item > 5)
    }
  },
  // 定义两个模块   user 和  setting,moudules同样拥有store的属性
  modules:{
    user:{
      state:{
        token:"123"
      },
      mutations:{},
      actions:{},
      getters:{},
      modules:{}
    },
    setting:{
      state:{
        name:"张三"
      }
    }
  }
})

<template>
  <div>
    <h2>{{ $store.state.user.token }}</h2>
    <h2>{{ $store.state.setting.name }}</h2>
  </div>
</template>
3.优化使用
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0,
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
  mutations: {
    addcount(state, num) {
      state.count += num
    }
  },
  actions: {
    Aoscount(store, num) {
      setTimeout(() => {
        store.state.count += num
      }, 1000);
    }
  },
  getters: {
    changelist(state) {
      return state.list.filter(item => item > 5)
    },
    //把模块中的变量通过getters简化使用
    token: state => state.user.token,
    name: state => state.setting.name
  },
  // 定义两个模块   user 和  setting,moudules同样拥有store的属性
  modules: {
    user: {
      state: {
        token: "123"
      },
      mutations: {},
      actions: {},
      getters: {},
      modules: {}
    },
    setting: {
      state: {
        name: "张三"
      }
    }
  }
})

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

<script>
//1.引入辅助函数
import { mapGetters } from "vuex";
export default {
  //通过计算属性来显示getters里面的数据
  computed: {
    // 2.通过辅助函数在计算属性中解构使用
    ...mapGetters(["changelist"]),
    ...mapGetters(["token", "name"]),
  },
};
</script>
4.模块化中的命名空间

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

  // 定义两个模块   user 和  setting,moudules同样拥有store的属性
  modules: {
    user: {
      state: {
        token: "123"
      },
      mutations: {
        changetoken(state) {
          state.token = 666
        }
      },
      actions: {
        axtoken(store){
          setTimeout(() => {
            store.commit("changetoken")
          }, 1000);
        }
      },
      getters: {},
      modules: {}
    },
    setting: {
      state: {
        name: "张三"
      }
    }
  }

<template>
  <div>
    <h3>{{ token }}</h3>
    <button @click="$store.commit('changetoken')">修改</button>
    <button @click="$store.dispatch('axtoken')">异步修改</button>
  </div>
</template>

如果我们想保证内部模块的高封闭性，我们可以采用namespaced来进行设置

  // 定义两个模块   user 和  setting,moudules同样拥有store的属性
  modules: {
    user: {
      namespaced: true,//true表示给user模块加了一道锁，此时模块不再是全局，而是局部，只属于user
      state: {
        token: "123"
      },
      mutations: {
        changetoken(state) {
          state.token = 666
        }
      },
      actions: {
        axtoken(store) {
          setTimeout(() => {
            store.commit("changetoken")
          }, 1000);
        }
      },
      getters: {},
      modules: {}
    },
    setting: {
      state: {
        name: "张三"
      }
    }
  }

<template>
  <div>
    <h3>{{ token }}</h3>
      //具有独立命名空间的user模块，访问里面的函数时，要加上模块名
      //语法：$store.commit('模块名/函数名')
      //语法：$store.dispatch('模块名/函数名')
    <button @click="$store.commit('user/changetoken')">修改</button>
    <button @click="$store.dispatch('user/axtoken')">异步修改</button>
  </div>
</template>
5.利用辅助函数调用
<template>
  <div>
    <h3>{{ token }}</h3>
    <button @click="changetoken">辅助函数修改</button>
    <button @click="axtoken">辅助函数异步修改</button>
  </div>
</template> 

<script>
//1.引入辅助函数
import { mapMutations, mapActions } from "vuex";
export default {
    //通过辅助函数把user模块中的函数解构到methods中，然后可以直接使用
  methods: {
      //调用具有独立空间的模块中的函数，通过以下语法获取
      //语法：mapMutations（‘模块名’，['函数名']）
    ...mapMutations("user", ["changetoken"]),
    ...mapActions("user", ["axtoken"]),
  },
};
</script>
ᥴcc+
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vuex的基础
01-27
Vuex是一个专为Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue的官方调试工具devtoolsextension，提供了...
vuex基础梳理
11-25
vuex官网前几节内容梳理，vuex官网前几节内容梳理，vuex官网前几节内容梳理
VueX实践--最基本的计数应用
caipital的博客
09-15 340
首先搭建一个Vue脚手架，参考：https://editor.csdn.net/md/?articleId=108566766 删除项目无关的文件： 1.删除components/HelloWorld.vue组件。 2.删除路由里导入的组件代码： 3.删除App.vue中的样式和图片： 4.删除assets里的图片： 运行http://localhost:8081可以看到页面上什么都没有，我们现在可以开始搞事情了。 安装Vuex cnpm i vuex --save-dev 在src目录下新建一
Vuex的介绍和详细使用
湾流~ 的博客
11-12 203
vuex的介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用**集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测**的方式发生变化。 解决的问题 vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。 图示 总结 修改state状态必须通过mutations mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行 执行异步代码，要通过actions，然后将数据提交给mutations才
vuex-状态管理模式
码农的专栏
03-21 849
import { mapState,mapActions,mapGetters,mapMutations } from 'vuex' 首先们定义一个状态模块：settings.js import defaultSettings from '@/settings' const { showSettings, tagsView, fixedHeader, sidebarLogo } = de...
vuex 文件夹目录整理
weixin_34376986的博客
11-02 860
1，执行事件和调用 this.$store.state.count.count 2添加模块 3模块内执行过程 模块内部的数据：①内部state，模块内部的state是局部的，也就是模块私有的，比如是car.js模块state中的list数据，我们要通过this.$store.state.car.list获取；②内部getter、mutation和action，仍然注册在全局命...
Vue学习之七(动画钩子,Vuex的使用与购物车的展示)
David Wu
04-23 1217
飞入购物车的动画 步骤: 1、创建一个div，里面放一个img，把它放在加入购物车的位置，并且隐藏 1.1 创建了div和img，写了必要的样式 1.2 让div刚开始的时候，显示到加入购物车这个位置，那么就必须获取加入购物车的offset 2、点击加入购物车，div显示出来，并且通过动画的方式移动到购物车的位置 2.1、在被动画元素上，...
Vuex基础
02-20
Vuex播放列表一个Vue.js项目构建设置# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build 有关如何工作的详细说明，请...
vuex简单基础示例
03-25
这是一个简单基础示例的代码，原文链接：https://blog.csdn.net/u012551928/article/details/88778685
vuex，简单易懂！！！
m0_49159526的博客
12-08 435
vuex 为什么会有Vuex ? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。 结论 修改state状态必须通过mutations mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行 执行异步代码，要通过actions，然后
vuex --- vue的几种状态管理模式详细说明
qq_39188241的博客
10-25 837
vuex -- vue状态管理模式1. 初识vuex1.1 安装 vuex1.2 使用vuex初始化 store 下的 index.js 中的内容将store 挂载到当前项目的 Vue 实例中去 [ main.js ]在组件中使用 vuex2. vuex 的核心概念2.1 vuex 的工作流程2.2 mutations2.2.1 Mutations 传值2.2.2 增删 state 中的成员2.3 Getters2.4 Actions2.5 modules2.5.1 模块的细节3. 规范目录结构 1.
简单和复杂的vuex配置
weixin_46547740的博客
03-07 195
简单的vuex配置 //将数据都存到本地存储中 this.$store.dispatch('onMobile',填写数据) //触发actions异步 this.$store.commit('SET_Mobile',填写数据) //触发mutations方法 this.$store.state.mobile //获取vuex中的数据 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vue
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 663
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue中的事件
weixin_43390711的博客
05-16 159
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1100
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Vue.js的发展史（一）
2301_79683791的博客
05-15 753
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 350
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
vue3 vuex基础使用 案例
05-23
好的，这里为您提供一个基于Vue3和Vuex的简单案例： 首先，需要安装Vue3和Vuex： ``` npm install vue@next vuex@next ``` 然后在`main.js`中引入Vue和Vuex，并创建一个store实例： ```javascript import { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值