vue-vuex

最新推荐文章于 2023-07-26 22:43:37 发布
最新推荐文章于 2023-07-26 22:43:37 发布
阅读量253 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72694993/article/details/126795910
版权

一、vuex的基本搭建

如果我们在创建项目的时候并没有勾选vuex的功能，我们需要通过在文件夹当前集成终端中输入以下代码进行安装vuex

npm install vuex --save

创建完之后vuex会自动帮我们在store里边创建好index.js

二、vuex-state（存储项目使用的数据）

我们在vuex给我们创建的index.js中找到state对象，在里边写入我们需要的数据，以我下边写的代码为例子，我再去state中存储了用户的相关信息

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user:{
      name:"xingxing",
      sex:"男",
      age:18
    }
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

当我们需要在对应组件取到这个数据的时候需要在vue的原型对象上找，我们可以通过this.$store.state来找到我们定义的state里边的内容，我们于是可以像下边这样取到我们在state中定义的数据 ，这样我们就取到了我们刚刚定义的user中dename属性，当然我们也可以通过计算属性手写返回我们state中的数据

<template>
    <div>
        <h2>
            欢迎来到我的网站,
            {{this.$store.state.user.name}}
         
            
        </h2>
    </div>
</template>
<style scoped>  

</style>
<script>
    export default{

    }

</script>

三、vuex-mutations（改变state中的数据，只有这个里边能修改state中的数据）

1.我们用以下代码做一个计数器的案例，我们首先在state中定义一个count作为计数器的当前数值（初始为0），通过计算属性显示到页面上；第一个代码段是我们在store下的index.js中写的，第二个是我们在定义计数器的组件上写的

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count:0
    
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

<template>
    <div>
        <h2>
        当前计数器的值 {{count}}        
            
        </h2>
    </div>
</template>
<style scoped>  

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

</script>

这样我们就完成了第一步，初始计数器的数值

2.我们通过mutations进行修改state中的数据达到计数器的效果，mutations中的函数可以具有两个参数，第一个参数是state，第二个参数是额外参数，我们实现三个功能：+1，-1,+10

我们通过以下代码实现+1-1的操作，在store下index.js定义mutations里边的+1和-1对应的函数

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count:0
    
  },
  getters: {
  },
  mutations: {
    addOne(state){
     state.count++;
    },
    reduceOne(state){
      state.count--;
    }
  },
  actions: {
  },
  modules: {
  }
})

然后再计数器对应的组件定义我们的方法来调用mutations方法执行+1-1操作

<template>
    <div>
        <h2>
        当前计数器的值 {{count}}        
            <button @click="addOne()">+1</button>
            <button @click="reduceOne()">-1</button>
        </h2>
    </div>
</template>
<style scoped>  

</style>
<script>
    export default{
   computed:{
    count(){
        return this.$store.state.count;
    }
   },
   methods:{
    addOne(){
  this.$store.commit('addOne');
   },
    reduceOne(){
        this.$store.commit('reduceOne');
   }
   }
    }

</script>

我们需要store下的commit方法进行引用刚刚在mutations下边定义的方法，就完成了+1-1操作

3.完成+10操作

我们仍然像刚才一样，在index.js下定义我们的函数，只是我们可以把第二个参数也定义上，如下边的代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count:0
    
  },
  getters: {
  },
  mutations: {
    addOne(state){
     state.count++;
    },
    reduceOne(state){
      state.count--;
    },
    addTen(state,paylod){
     state.count+=paylod;
    }
  },
  actions: {
  },
  modules: {
  }
})

 然后我们在组件上进行调用，这里边的commit第二个参数就是我们刚刚定义的第二个参数，见下边代码

<template>
    <div>
        <h2>
        当前计数器的值 {{count}}        
            <button @click="addOne()">+1</button>
            <button @click="reduceOne()">-1</button>
            <button @click="addTen()">+10</button>
        </h2>
    </div>
</template>
<style scoped>  

</style>
<script>
    export default{
   computed:{
    count(){
        return this.$store.state.count;
    }
   },
   methods:{
    addOne(){
  this.$store.commit('addOne');
   },
    reduceOne(){
        this.$store.commit('reduceOne');
   },
   addTen(){
    this.$store.commit('addTen',10);
    
   }
   }
    }

</script>

这样我们+10的操作也完成了！

四、vue-getters（类似于计算属性，在原有数据上进行处理得到新数据）

我们利用这个功能对计数器进行功能补充，实现翻倍的功能

我们在getters下定义，本质上和计算属性用法相同

 getters: {
    doubleCount(state){
      return state.count*2;
    }
  },

然后我们在组件引用这个属性doubleCount

 

<template>
    <div>
        <h2>
        当前计数器的值 {{count}}    
        当前计数器的值的两倍{{double}}        
            <button @click="addOne()">+1</button>
            <button @click="reduceOne()">-1</button>
            <button @click="addTen()">+10</button>
        </h2>
    </div>
</template>
<style scoped>  

</style>
<script>
    export default{
   computed:{
    count(){
        return this.$store.state.count;
    },
    double(){
        return this.$store.getters.doubleCount;
    }
   },
   methods:{
    addOne(){
  this.$store.commit('addOne');
   },
    reduceOne(){
        this.$store.commit('reduceOne');
   },
   addTen(){
    this.$store.commit('addTen',10);
    
   }
   }
    }

</script>

五、vuex-actions（由于mutations函数中不能书写异步代码，可以在这个里边编写异步代码再提交mutations修改状态）

我们在state中定义一个空的列表list,实现3s后让他的值为[1,2,3,4]

1.首先我们修改状态，只能通过mutations函数进行修改，所以我们首先在mutations中定义一个修改状态的函数如以下代码中的函数addList函数

  mutations: {
    addOne(state){
     state.count++;
    },
    reduceOne(state){
      state.count--;
    },
    addTen(state,paylod){
     state.count+=paylod;
    },
    addList(state,namelist){
     state.list=namelist;
    }
  },

2.因为mutations函数不支持异步代码，所以我们要在actions中定义函数去实现3s后进行修改，他的参数是一个context（是store实例的一个拷贝调用，调用commit方法调用mutations中的addList函数进行修改state中的值

  actions: {
    addListAct(context){
      setInterval(() => {
        context.commit('addList',[1,2,3,4]);
      }, 3000);

    }

3.我们在实现该功能的组件，调用dispatch方法调用action方法（在页面渲染之前用生命周期钩子进行调用）。并将列表渲染到页面

<template>
    <div>
    <aside>
    <ul class="font">
     <li v-for="item in list" :key="item">{{item}}</li>
    </ul></aside>
    <main><router-view></router-view></main>
    
    </div>
</template>

<script>
    export default {
        computed:{
            list(){
                return this.$store.state.list;
            },
        },
        mounted(){
            this.$store.dispatch('addListAct');
        }
    }
    
</script>

<style scoped>
   

</style>

4.另外，我们同样可以在action函数定义第二个参数，然后在dispatch方法中传入数值，和mutations和commit相似，在这里就不演示了 

六、vuex-modules（模块：相当于一个小型的store仓库）

1.首先，我们在src目录下新定义一个moudules文件夹，我们在文件夹下新建一个js文件就是我们新的小仓库，我们把store仓库里的东西都搬到这个小仓库里边进行了解moudule的使用，即新建的小仓库的内容为如下代码

export default{
state:{
    count:0,
    list:[]
},
getters: {
    doubleCount(state){
      return state.count*2;
    }
  },
  mutations: {
    addOne(state){
     state.count++;
    },
    reduceOne(state){
      state.count--;
    },
    addTen(state,paylod){
     state.count+=paylod;
    },
    addList(state,namelist){
     state.list=namelist;
    }
  },
  actions: {
    addListAct(context,paylod){
      setInterval(() => {
        context.commit('addList',paylod);
      }, 3000);

    }
  },




}

2.然后我们在大仓库（即store文件夹下的index.js中导入我们的小仓库文件，并在moudules中调用），现在这个modules中的count相当于count:count的简写也可以换成c:count

import Vue from 'vue'
import Vuex from 'vuex';
import count from '../modules/counters'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      
    
  },

  modules: {
    count
  }
})

3.修改我们在组件的代码，注意除了state以外，小仓库和大仓库的（mutations,getters,actions会进行合并），所以我们只需要修改带state的，在前边加上我们导入的模块count,即把this.$store.state.count更改为this.$store.state.count.count;

<template>
    <div>
        <h2>
        当前计数器的值 {{count}}    
         当前计数器的值的两倍{{double}}   
            <button @click="addOne()">+1</button>
            <button @click="reduceOne()">-1</button>
            <button @click="addTen()">+10</button> 
        </h2>
    </div>
</template>
<style scoped>  

</style>
<script>
    export default{
   computed:{
    count(){
        return this.$store.state.count.count;
    },
    double(){
        return this.$store.getters.doubleCount;
 
   }},
   methods:{
    addOne(){
  this.$store.commit('addOne');
   },
    reduceOne(){
        this.$store.commit('reduceOne');
   },
   addTen(){
    this.$store.commit('addTen',10);
    
   }
   }
    }

</script>

4.当模块的getters,mutations与大仓库的函数名字冲突了怎么办

我们可以通过命名空间的方式进行调节，输入代码namespaced:true开启命名空间，即如下代码

export default{
    namespaced:true,
state:{
    count:0,
    list:[]
},
getters: {
    doubleCount(state){
      return state.count*2;
    }
  },
  mutations: {
    addOne(state){
     state.count++;
    },
    reduceOne(state){
      state.count--;
    },
    addTen(state,paylod){
     state.count+=paylod;
    },
    addList(state,namelist){
     state.list=namelist;
    }
  },
  actions: {
    addListAct(context,paylod){
      setInterval(() => {
        context.commit('addList',paylod);
      }, 3000);

    }
  },




}

但是开启命名空间后，我们的getters等在调用时都需要在前边加上  模块名/ ，拿我们这个例子进行举例，如下代码就是开了命名空间以后，组件上的代码，注意getters访问需要带特殊字符，所以需要使用['count/doubleCount']的方式

<template>
    <div>
        <h2>
        当前计数器的值 {{count}}    
         当前计数器的值的两倍{{double}}   
            <button @click="addOne()">+1</button>
            <button @click="reduceOne()">-1</button>
            <button @click="addTen()">+10</button> 
        </h2>
    </div>
</template>
<style scoped>  

</style>
<script>
    export default{
   computed:{
    count(){
        return this.$store.state.count.count;
    },
    double(){
        return this.$store.getters["count/doubleCount"];
 
   }},
   methods:{
    addOne(){
  this.$store.commit('count/addOne');
   },
    reduceOne(){
        this.$store.commit('count/reduceOne');
   },
   addTen(){
    this.$store.commit('count/addTen',10);
    
   }
   }
    }

</script>

六、Vuex的核心功能就介绍到这里，最后希望大家中秋快乐~~~~

IT行星
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-vuex-starter-kit:开始使用Axios，Vue2，Vuex2和Vue-router2。 使用webpack构建应用
05-02
vue-vuex入门套件开始使用Vue，Vuex和Vue-router。 使用webpack构建应用。快速开始确保您的节点版本> = 6.0，NPM> = 3 # Clone project code git clone ... use Hot Module Replacenpm start # yarn start 在浏览器中...
前端学习（2623）：Vuex初步识别
歌谣的博客
11-20 454
Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 # 什么是“状态管理模式”？ 让我们从一个简单的 Vue 计数应用开始： new Vue({ // state
vue--vuex详解
cmy741741的博客
08-26 378
1.什么是vuex 官方说法： Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解： Vuex是用来管理组件之间通信的一个插件 2.为什么要用Vuex？ 我们知道组件之间是独立的，组件之间想要实现通信，我目前知道的就只有props选项，但这也仅限于父组件和子组件之间的通信。如果兄弟组件之间想要实现通信呢？ 抛开怎么...
vue--vuex介绍与使用
鑫709的博客
05-15 948
Vue介绍 Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，单一状态树,通俗理解就是一个应用的数据集合，可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作。详情官方解释。 Vuex的组成 Vuex分成五个部分： State：单一状态树 Getters：状态获取 Mutations：触发同步事件 Actions：提交mutation，可以包含异步操作 Module：将vuex进行分模块 前四个特征
Vue--Vuex
qq_62254095的博客
07-26 356
Vuex 是一个 Vue 的 状态管理工具，状态就是数据。大白话：Vuex 是一个插件，可以帮我们管理Vue 通用的数据 (多组件共享的数据)。例如：购物车数据 个人信息数state : {count : 0 } , // 定义mutations mutations : {} })通过mutations修改state的步骤1.定义 mutations 对象，对象中存放修改 state 的方法。
vue - vuex详细讲解和modules模块化的使用
qq_43886365的博客
09-16 4723
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 通俗的来说，vuex是用于当某一状态需要在多个组件中共享，方便我们使用并追踪这些状态时使用。
vue-vuex中使用commit提交mutation来修改state的方法详解
12-10
在vuex中，关于修改state的方式，需要commit提交mutation。官方文档中有这么一句话： 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 为了搞清楚其原因，查阅了很多资料，发现其它人在做vuex的源码解析的...
vue-vuex-router-master.zip
06-18
完整配置的vue-cli脚手架，满足你不同开发的需求
vue-cli-plugin-modular-vuex:为Vue CLI 3插件创建模块化Vuex存储
05-19
vue-cli-plugin-模块化vuex 为创建模块化Vuex存储 安装 如果尚未安装vue-cli 3，请先按照此处的安装说明进行操作： : 提示：如果由于仍然需要vue init而不想覆盖当前的vue-cli，请。 使用vue-cli 3.0生成项目 ...
Vuex ——详细介绍
m0_67401606的博客
07-28 1973
Vuex是一个专门为Vue.js应用程序开发的，它采用应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。可以理解为将多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的Vue实例中，让其他组件可以使用，它最大的特点是一般情况下，我们会在Vuex中存放一些需要在多个界面中进行共享的信息。...
Vue——vuex简介
mantou_riji的博客
07-22 1874
vuex是专门在Vue中实现状态(）管理的一个Vue，对vue应用中 多个组件的共享状态(）进行(读/写)。 vuex也是一种，且适用于任意组件间通信。引入： 需求：组件B、C、D 都需要组件A上的数据X。 如果使用： 这时候我们就会想既然所有组件都要使用组件A中的数据我们为什么不直接把组件A中的数据提取出来作为公共数据呢，这就引入了vuex。 vuex不属于任何一个组件，里面存储的是组件公用的数据，任何组件都可以获取和修改vuex中的数据：所以只要用到共享数据就可以使用vuex。如果vue组件的请求有任
如何在vue-cli中使用vuex
Wopelo的博客
05-11 6761
前言 众所周知，vuex 是一个专为 vue.js 应用程序开发的状态管理模式，在构建一个中大型单页应用中使用vuex可以帮助我们更好地在组件外部管理状态。而vue-cli是vue的官方脚手架，它能帮助我们方便的配置webpack。这样看来，有很大的可能我们需要同时使用vue-cli与vuex 如何在vue-cli中使用vuex 项目搭建及添加vuex 当我们使用vue-cli搭建一个vu...
【Vue】Vuex详解
游坦之的博客
04-24 8224
【前言】本博客系统的讲诉了Vuex的安装、搭建。以及Actions、Mutations、State、Getters的使用，为什么使用mapState、mapGetters以及一些细节的解释 Vuex原理讲解 Actions：词义是 动作行为 Mutations:词义是加工、维护 State:词义是 状态和数据 Dispatch：词义是派遣、发出 Commit：提交 Render: 渲染 Mutate：转变 从这些单词中，大体上可以概括整个图的流程。 VC派发（Dispatch）消息.
store文件夹 vue_vue store之状态管理模式的详细介绍
weixin_33657398的博客
01-30 670
状态管理一、状态管理(vuex)简介uex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。Vuex 的思想当我们在页面上点击一个按钮，它会处发(dispatch...
状态store的写入和读取
weixin_44805161的博客
03-10 3051
1 vue中store的写入和读取 1.1 创建store文件夹 1.2 写js文件 const state = { // this.$store.state. username: null, token: null, brandArr: [], // 记录访问路径 shopStatus: '0' } // 获取数据 对外暴露 // mautation...
Vue系列之—Vuex详解
zhou139856的博客
07-03 3327
Vue系列之—Vuex详解
vue中使用vuex(超详细)
前端-小鑫
07-26 6062
vuex中，有默认的五种基本的对象个人理解： state : (初始化数据) getter (输出给外界数据) mutation (定义的方法，必须同步) action (输出给外界方法，可异步) module（每一个js 文件都可以包含state getter mutation action四项，统一进行管理） 下载 npm install vuex --save 以下使用仅是初步使用，如需封装可自行再次封装 使用方式 1.新建一个store.js文件 import Vue from '
vue-vuex详解
最新发布
11-18
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它允许您在应用程序中管理和维护状态，例如用户信息、购物车、主题等。Vuex将状态存储在一个集中的存储库中，称为store。Vuex的核心概念包括state、mutations、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值