四十二、开始vuex的学习：如何在vue中使用vuex -ag凯发k8国际

@author：runsen
@date：2020/7/12

人生最重要的不是所站的位置，而是内心所朝的方向。只要我在每篇博文中写得自己体会，修炼身心；在每天的不断重复学习中，耐住寂寞，练就真功，不畏艰难，奋勇前行，不忘初心，砥砺前行，人生定会有所收获，不留遗憾 （作者：runsen ）

作者介绍：runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，python， java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在csdn。决定今天比昨天要更加努力。我的征途是星辰大海！

今天，我们开始了vuex的学习。vuex用白话来说，就是帮我们存储一下多个组件共享的数据，方便我们对其读取和更改。

文章目录

• vuex的简介
• vuex的安装
• 引入 vuex挂载到vue对象
• 兄弟组件
• 路由编写

vuex 是专门为 vue.js 设计的状态管理库，它集中存储，管理所有组件的状态；通过前面的学习，我们知道父组件要把值传递给子组件的时候，可以通过 props 来传递，子组件要把值传递给父组件的时候，可以通过事件的形式来实现，而对于兄弟组件来说，就需要用到 vuex 来实现了。也就是一个组件把值放入到 vuex 中，另一个组件从中取值从而实现参数传递的效果。

vuex的五大特性：状态state、计算属性getter、同步行为mutation、异步行为action、模块module

• state：用于存储数据，类似vue实例的data属性。
• mutations：用于递交更改，对state对象中的属性数据进行更改。
• actions：用于进行递交异步更改，通过调用mutations实现对数据的更改。
• getters：可以认为是store的计算属性;与计算属性一样,getter的返回值会根据它的依赖缓存起来,且只有当它的依赖值发生变化才会被重新计算
• mapgetters：辅助函数，将 store 中的 getter 映射到局部计算属性：
• module：将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

下面我们创建vue项目

创建的目录如下所示。

下面要执行npm install vuex --save 命令安装 vuex，要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。

先通过官方提供的一个计数器的示例来引入 vuex 的使用，具体实现步骤如下，在 src 文件夹下新建 store 文件夹，意思为数据仓库，里面存放了整个项目需要的共享数据，在 store 下新建 index.js

index.js代码如下。

import vue from 'vue' import vuex from 'vuex' //使用vuex vue.use(vuex) //导出store export default new vuex.store({state: {count: 0},//组件通过dispatch方法触发actions里面的countadd方法，然后actions提交mutations里面的countadd方法。actions: {//接收组件传过来的参数num，action 函数接受一个与 store 实例具有相同方法和属性的 context 对象countadd(context,num){context.commit('countadd',num)}},mutations: {//传入一个state对象，接收传过来的参数numcountadd(state,num){state.count=num}} })

这里顺便主要介绍下store文件夹中的四个js文件。

index.js //存储状态 并建立依赖关系 actions.js //触发mutations中的方法 请求数据写在这里 getters.js //状态获取逻辑 mutations.js //操作逻辑

创建vuex的实例 new vuex.store()，然后再main.js将vuex实例挂载到vue对象。接下来，在main.js中引入store，这里我导入了router，router在下篇文章中介绍。

下面就是main.js代码

// the vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import vue from 'vue' import store from './store/index' // 引入store import router from './router'import app from './app'vue.config.productiontip = false /* eslint-disable no-new */ new vue({el: '#app',store,router,components: { app },template: '' })

执行npm run dev跑起来

vuex的作用就是在兄弟组件共享数据。

下面新建组件child1.vue，代码如下。

<template><div class="child-1"><p>child1:{{count}}</p><button @click="handleclick(1)">child1-add</button></div> </template><script> export default {name: 'child1',data () {return {//我们不再将数据放到组件里//count: 0}},//通过计算属性来获得countcomputed: {count: function(){//通过vue的this.$store来获得statereturn this.$store.state.count}},methods: {handleclick:function(num){//通过dispatch触发actions中的方法countadd，actions提交mutations，num是携带的参数this.$store.dispatch('countadd',num)}} } </script> <style scoped> </style>

下面新建组件child2.vue，代码如下。

<template><div class="child-2"><p>child2:{{count}}</p><button @click="handleclick(10)">child2-add</button></div> </template><script> export default {name: 'child2',data () {return {//count: 0}},//通过计算属性来获得countcomputed: {count: function(){//通过vue的this.$store来获得statereturn this.$store.state.count}},methods: {handleclick:function(num){//通过dispatch触发actions中的方法countadd，actions提交mutations，num是携带的参数this.$store.dispatch('countadd',num)}} } </script> <style scoped></style>

最后，新建组件parent.vue，然后在路由中引过去，指定上面的两个components。

<template><div class="parent"><child-1></child-1><child-2></child-2></div> </template><script> import child1 from './child1' import child2 from './child2' export default {name: 'parent',data () {return {}},components: {child1,child2} } </script><!-- add "scoped" attribute to limit css to this component only --> <style scoped> </style>

关于router直接是没有介绍的，其实我在创建项目的时候选择了router路由。路由就是指定路径和组件的，index代码如下。

import vue from 'vue' import router from 'vue-router' import parent from '@/components/parent'vue.use(router)export default new router({routes: [{path: '/',name: 'parent',component: parent}] })

下面就是最终的目录模块。

最终效果就是点击第一个按钮加一，第二个加10的效果。

相信写到这里，我i应该对vuex有了更加清楚的理解了。

总结

以上是ag凯发k8国际为你收集整理的四十二、开始vuex的学习：如何在vue中使用vuex的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。