Vuex (二)

最新推荐文章于 2023-01-09 14:37:10 发布
最新推荐文章于 2023-01-09 14:37:10 发布
阅读量86 收藏
点赞数
分类专栏： 新手 文章标签： vue vuex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zcylxzyh/article/details/114579731
版权

Vuex（一）

这篇文章将更加详细讲解Vuex的使用，简单讲解见 Vuex（一）

Vuex_2

当多个组件想使用同一个数据的时候，就可以使用Vuex

1、安装Vuex

npm i vuex -S

2、导入Vuex并让vue管理

首先新建一个文件夹：store （一般都这么建）
在这里插入图片描述
然后在文件夹里创建 index.js
1、安装插件
2、创建对象
3、导出store对象
4、去main.js挂载一下

//这个 from 'vue'  from后面那个是使用npm导入的时候所使用的名字，可以在配置文件中更改
import Vue from 'vue'
import Vuex from 'vuex'
//1、安装插件
Vue.use(Vuex)
//2、创建对象，对象中的属性是固定的这几项
const store = new Vuex.Store({
    state: {
    //放数据
        counter: 1000
    },
    mutations:{
	//放方法，同步方法
    },
    actions:{
	//放异步方法
    },
    getters:{
	//类似于vue里的计算属性
    },
    modules:{

    }
})
//3、导出store对象
export default store
//4、去main.js挂载一下

main.js

在这里挂载之后就意味着所有的vue组件都有一个$store对象

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  // 在这里挂载之后就意味着所有的vue组件都有一个$store对象
  store
})

3、使用Vuex数据(state)方式

因为挂载之后就意味着所有的vue组件都有一个$store对象，所以可以按照如下方式使用

HelloVuex.vue
在这里插入图片描述
App.vue
在这里插入图片描述

<template>
  <div id="app">
    <h2> {{message}} </h2>
    <h2> {{$store.state.counter}} </h2>
    <button @click="counter++">+</button>
    <button @click="counter--">-</button>
    <hello-vuex></hello-vuex>
  </div>
</template>
<script>
import HelloVuex from './components/HelloVuex'
export default {
  name: 'App',
  components: {
    HelloVuex
  },
  data() {
    return {
      message: '我是APP组件',
      counter: 0
    }
  },
}
</script>
<style>
</style>

结果：此时两个组件都使用的Vuex里面的数据
在这里插入图片描述

4、更新、修改Vuex数据(state)方式–mutations–放同步方法

在这里插入图片描述

例子一：基本使用

不允许组件直接修改state的值，建议组件通过使用 mutations 中的方法来改

修改mutations：添加两个方法

 mutations: {
        //方法
        increment(state) {
            state.counter++
        },
        decrement(state) {
            state.counter--
        }
    },

修改App.vue

在这里添加两个方法，然后在方法中使用mutations中的方法操作state中数据
在这里插入图片描述
在这里插入图片描述

 methods: {
    add() {
      this.$store.commit('increment')
    },
    sub() {
      this.$store.commit('decrement')
    }
  },
细节讲解：参数传递

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

提交单个参数

在commit的时候方法后跟参数，并且在Vuex中mutations对应的方法中使用第二个参数接收。
在这里插入图片描述
在这里插入图片描述
在App.vue添加

<button @click="addCount(5)">-</button>

方法中添加：

 addCount(count){
       this.$store.commit('incrementCount',count)
    }

在index.js中添加：

        incrementCount(state ,count) {
            state.counter += count
        },
提交多个参数

在commit的时候方法后跟参数，并且在Vuex中mutations对应的方法中使用第二个参数接收。此时这个参数是一个对象。

App.vue中添加

<button @click="addStu()">添加学生</button>

    addStu(){
      const stu = {id:5 ,name:'zyh', age:24 }
      this.$store.commit('addStu',stu)
    }

index.js中添加

        addStu(state,stu){
            state.students.push(stu)
        }
提交风格

除了上述提交以外，提交还可以写为如下风格：

App.vue中添加

<button @click="addStu2(10)">添加学生2</button>

 addStu2(){
      this.$store.commit({
        type: 'addStu2',
        id:6,
        name:'panda',
        age:25
      })
    }

index.js中添加

 addStu2(state,payload){
            console.log(payload.name)
            console.log(payload.id)
            console.log(payload.age)
            state.students.push(payload)
        }

此时结果：会增加type类型还可以通过点的形式访问其中属性
在这里插入图片描述
综上：这种提交风格相当于提交的是一个对象，包含了type和要传递的参数（可单个也可以多个）

响应式规则

可以使用set添加属性，此时是响应式的
在这里插入图片描述
App.vue添加代码

   <h2> {{$store.state.info}} </h2>
    <button @click="updateinfo()">添加信息</button>

    updateinfo(){
       this.$store.commit('updateinfo')
    }

在index中添加

        info:{
            name:'dululu'
        }

        updateinfo(state) {
            // 这样添加属性的话不是响应式的 --- 无法同步到页面上
            // state.info['address'] = '洛杉矶'

    //这样是响应式的 set => 参数一：要修改的值 参数二：key或者数组下标 参数三：value（可以是字符串或者number）
            Vue.set(state.info,'address','洛杉矶')
            //响应式删除属性
            //Vue.delete(state.info,'address')    
        },

结果：
在这里插入图片描述

5、getters基本使用

当一个数据需要经过一系列变化在使用的时候可以使用getters来实现，类似于vue中的计算属性

例子一：将counter平方

在getters添加代码：

 getters: {
        //类似于vue中的计算属性
        powerCounter(state){
            return state.counter * state.counter
        }
    },

使用方式：
在APP.vue中添加如下代码，注意方法不用加括号，当做属性来用就可以
在这里插入图片描述
结果：
在这里插入图片描述

例子二：获取大于20岁学生数据

state中添加：

        students:[
            {id:1 ,name:'zs',age:18},
            {id:1 ,name:'ls',age:24},
            {id:1 ,name:'ww',age:30},
            {id:1 ,name:'zl',age:10}
        ]

getters添加：
more20stu:获取大于20岁学生
more20stuLength:获取大于20岁学生人数
moreAgeStu：获取大于指定年龄学生
在这里插入图片描述
因为getters中只有两个参数，第一个是state，第二个是getters，所以想要获取指定年龄不能传入第三个参数，但是可以返回一个带参数的函数，然后在函数中通过调用地方传递过来的参数进行判断

 more20stu(state){
            return state.students.filter(s => s.age >20)
        },
        more20stuLength(state,getters){
            return getters.more20stu.length
        },
        moreAgeStu(state){
            return function (age) {
                return state.students.filter(s => s.age >age)
            }
        }

在App.vue添加：
在这里插入图片描述

    <h2> {{$store.getters.more20stu}} </h2>
    <h2> {{$store.getters.more20stuLength}} </h2>
    <h2> {{$store.getters.moreAgeStu(12)}} </h2>

结果：
在这里插入图片描述

6、action的使用–放异步方法

如果是一个异步的方法我们要放入action，因为放入mutations中vuex是监听不到变化的。

对于一个异步方法我们需要如下调用：
在App.vue的方法中先通过dispatch引用action中的方法，然后在action的方法中引用mutation中的方法。

在App.vue中添加

<button @click="updateinfo2()">异步添加信息</button>

    updateinfo2(){
       this.$store.dispatch('aUpdataInfo','我是payload')
    }

在index.js中的action中加

actions: {
        //context:上下文
        aUpdataInfo(context,payload) {
            console.log(payload)
            setTimeout(() => {
                context.commit('updateinfo')
            }, 1000);
        }
    },

如果要对数据进行操作后返回些东西：可以使用Promise

index.js中代码改为

      aUpdataInfo(context, payload) {
            return new Promise((resolve, rekect) => {
                setTimeout(() => {
                    context.commit('updateinfo')
                    console.log(payload)

                    resolve('111111')
                }, 1000);

            })
        }

App.vue中改为

    updateinfo2(){
       this.$store.dispatch('aUpdataInfo','我是payload').then(res =>{
          console.log('里面完成了提交');
          console.log(res);
       })
       
    }

注意上述代码中因为this.$store.dispatch调用了action中的方法，而在action方法中return了一个Promise，所以可以在App.vue调用action方法的那个后面 .then

7、modules的使用

模块有着自己的 state:{},mutations:{}, actions:{}, getters:{}
在这里插入图片描述

模块定义

在index.js添加

const moduleA = {
    state:{},
    mutations:{},
    actions:{},
    getters:{}
}

    modules: {
        a:moduleA
    }
模块中state

修改 moduleA

    state:{
        name: 'Tim'
    },

在App.vue中添加

<h2> {{$store.state.a.name}} </h2>

结果：
在这里插入图片描述
由此可以看出，vuex会自动把一个模块放到本身的state中去，调用的时候当做一个对象去调用

模块中的mutations

修改 moduleA

    mutations:{
        updateName(state,payload) {
            state.name = payload
        },
    },

App.vue中添加

    <h2> {{$store.state.a.name}} </h2>
    <button @click="updateName">修改名字</button>

    updateName(){
      this.$store.commit('updateName','lisi')
    }

结果：
在这里插入图片描述
可以看出，使用方式和以前一样，但是要注意，模块中的方法名字不要和store中的方法名字重复

模块中的getters

修改 moduleA

    getters:{
        fullname(state){
            return state.name + '1111'
        },
        fullname1(state,getters,rootState){
            return getters.fullname + rootState.counter
        }

    }

App.vue添加

    <h2> {{$store.getters.fullname}} </h2>
    <h2> {{$store.getters.fullname1}} </h2>

结果：
在这里插入图片描述
由此可看出，调用时和之前一样，但是在模块中的getters中的方法有三个参数，第三个参数是获取 根 也就是 store中的state

模块中的action

修改 moduleA

  actions: {
        aUpdataName(context) {
            setTimeout(() => {
                context.commit('updateName','wangwu')
            }, 1000);
        }
    },

App.vue

   <h2> {{$store.getters.fullname}} </h2>
    <h2> {{$store.getters.fullname1}} </h2>
    <button @click="aUpdataName">异步修改名字</button>

    aUpdataName(){
      this.$store.dispatch('aUpdataName')
    }

模块中的context有如下属性，这里的context.commit和store中context.commit不同，这里的只能提交模块中的，而store中的context.commit等同于store.commit
在这里插入图片描述
结果：
在这里插入图片描述

8、对象解构

想要获取对象中一些数据可以如下写：
在这里插入图片描述
此时console.log(name)就是why了

9、Vuex结构

我们先将index.js复制一份，然后进行抽取
新建如下文件，将index copy.js代码对应部分抽取进对应js文件，其中state是放在index copy.js中
在这里插入图片描述
形式为：

export default{
抽取内容
}

抽取后的index copy.js为

//这个 from 'vue'  from后面那个是使用npm导入的时候所使用的名字，可以在配置文件中更改
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutation'
import actions from './action'
import getters from './getters'
import moduleA from './modules/moduleA'
//1、安装插件
Vue.use(Vuex)
const state  =  {
    counter: 1000,
    students: [
        { id: 1, name: 'zs', age: 18 },
        { id: 1, name: 'ls', age: 24 },
        { id: 1, name: 'ww', age: 30 },
        { id: 1, name: 'zl', age: 10 }
    ],
    info: {
        name: 'dululu'
    }
}
//2、创建对象
const store = new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
    modules: {
        a: moduleA
    }
})
//3、导出store对象
export default store
//4、去main.js挂载一下

列举抽取样式：
moduleA

export default{
    state: {
        name: 'Tim'
    },
    mutations: {
        updateName(state, payload) {
            state.name = payload
        },
    },
    actions: {
        aUpdataName(context) {
            setTimeout(() => {
                context.commit('updateName','wangwu')
            }, 1000);
        }
    },
    getters: {
        fullname(state) {
            return state.name + '1111'
        },
        fullname1(state, getters, rootState) {
            return getters.fullname + rootState.counter
        }

    }
}
肉乎乎的鸭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuex中的值变化 页面重新渲染_Vuex二次封装，直接渲染页面，刷新界面不丢失。...
weixin_28886649的博客
12-31 312
QQ图片20200901094947.jpg开门见山地说，我们在使用Vuex的时候，经常会遇到使用方式麻烦，刷新之后Vuex丢失等问题。目录结构以及main.js配置.image.png在src文件夹中新建store文件夹，新建index.js，vuex_list.jsindex.jsimport Vue from 'vue';import Vuex from 'vuex';import {map...
VUEX
尽力漂亮的博客
10-10 2012
文章目录1.vue中各个组件之间传值2.了解vuex中的各个js文件的用途3. vuex使用步骤1.安装vuex2.在src目录下创建store模块，分别维护3 在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块4 在main.js中导入并使用store实例4.vuex取值：5.vuex存值6.调用ajax 1.vue中各个组件之间传值 1.父子组件 父组件...
vuex 二
wandoumm的博客
04-25 144
二、安装&amp;配置1. 安装vuex使用npm安装并保存到package.json中：npm install vuex --savepackage.json "devDependencies": { ... "vuex": "^2.1.1", ... },2. 配置配置方式和路由的配置方式差不多import Vue from 'vue' import Vuex f...
Vuex
tian_to_tian的博客
09-07 282
vuex的工作流程 1、vue组件 -> Dispatch派发 -> action 2、action -> commit提交 -> mutation 3、mutation -> mutate修改 -> state 4、state -> render渲染 -> vue组件 组成文件： state action mutation 四、什么时候使用vuex 中大型单页面应用（登录、购物车、tab选项...
uniApp 全局变量实现 VUEX的二次封装
m0_57547956的博客
09-27 2146
https://www.uviewui.com/guide/globalVariable.html 今天在看uView组件库时偶然发现uView对全局变量也有一些讲解 本人之前一直比较迷糊 于是就按照他的方式看了了解了一下 并且知道 自己之前一直在用的就是 将全局的基础配置 如文档所说确实会导致小程序在引用上有一些问题，刚好这个项目是新项目，于是决定改用vuex 并且进行二次的改造 按照文档来,开始整! 首先是文件结构 注意要使用vuex 需要引入和注册 这些百度就知道. 创建一个sto.
vuex 学习
青蛙king的博客
08-08 854
vuex 的工作原理—— https://www.jianshu.com/p/d95a7b8afa06
vuex
@不喝海之言@
11-11 505
文章目录Vuex的作用Vuex的使用方法一：安装二：定义vuex仓储三：在组件中使用仓储中的数据四：vuex使用代码示例五：vuex传参 【讲actions】六： vuex过滤，转换等操作数据 【讲getters】Vuex抽取代码-模块化抽取仓储代码到store.js进一步抽取，多个仓储定义常量代码模板GitHub地址 #Vue-vuex笔记 Vuex的作用 **vuex是一个专为vue.js应...
vue3中vuex 的使用基本使用和二次封装
最新发布
interest_ing_的博客
01-09 706
vuex可以帮助我们完成组件之间的数据传递，比如，一个组件里的按钮需要控制另一个组件的数据或者控件的时候，可以用到vuex来传递数据。在 Vue.js 的项目中，如果项目结构简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式，详细点击这篇文章查看。但是如果是大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这个问题。
Vuex学习
xuan971130的博客
04-27 1533
一、Vuex是做什么的 状态管理工具：多个组件共享状态（可以先简单理解成变量） 所有的组件都继承自vue的原型：可以通过在prototype中加属性实现上述对象，但是通过这种方式，无法实现响应式。 二、vue需要管理什么状态呢 ...
axios的二次封装和vuex的使用
m0_68937827的博客
08-02 289
1.项目说明 说明：因为这个项目没有后端接口数据，所以项目中需要用到的接口都是通过mock插件模拟出来的。 因为我们昨天home组件的静态页面已经搭建完，所以今天就将用axios来请求接口数据进行动态部署。 2.安装axios npm install axios --save 安装完成后在src文件夹中建立一个api文件夹，里面有两个文件，分别是：index.js这是统一项目管理的接口模块，后期的所有接口都在这里创建；mockAjax:这是axios进行二次封装模块 index文件代码如下： //统一管理
vuex直接赋值的三种方法总结
10-18
第二种方法是利用Vuex提供的辅助函数mapState来简化对状态的访问。mapState可以生成计算属性，帮助我们将Vuex的状态映射到组件的计算属性中。使用mapState可以有两种形式，一种是对象映射，另一种是数组映射。 对象...
Vuex实现数据增加和删除功能
10-16
##### 方法二：通过mapState辅助函数简写方式 ```javascript import { mapState } from 'vuex'; computed: { ...mapState(['bookList']) } ``` #### 4. 修改状态：Mutations 在Vuex中，更改状态的唯一方法是...
Vuex项目实测(二）
03-23
二、Vuex 的核心概念 1. **State（状态）**：应用中的所有数据都保存在这里，是唯一可信的数据源。 2. **Mutations（ mutations）**：修改 State 的唯一途径，必须是同步函数，便于跟踪记录。 3. **Actions（ ...
Vue个人学习心得_基础篇
zcylxzyh的博客
02-23 3261
Vue_基础篇（一）1、Vue.js什么是Vue.js为什么要学习Vue框架和库的区别MVC和MVVMVue基本代码和MVVM对应关系2、Vue的简单指令v-cloak、v-text、v-html、v-bindv-on案例一：跑马灯事件修饰符 1、Vue.js 什么是Vue.js 为什么要学习Vue 框架和库的区别 MVC和MVVM Vue基本代码和MVVM对应关系 <!DOCTYPE html> <html lang="en"> <head> <
Vue实战 POS系统
zcylxzyh的博客
03-07 1311
POS前言1、构建项目目录2、创建POS组件3、图标库注意：引用彩色图标4、侧边栏leftNav5、Element组件库 前言 进行一个基于vue的收银界面 1、构建项目目录 使用vue-cli快速构建 2、创建POS组件 新建Pos组件 Pos.vue <template> <div class="pos"> Hello </div> </template> <script> export default { name:
HTML+CSS案例
zcylxzyh的博客
01-30 1011
综合案例1、分析1.1 整体结构1.2 部分结构2、代码部分2.1 初始化_CSS2.2 头部2.2.1 头部_HTML2.2.2 头部_CSS2.3、中间轮播图2.3.1 中间轮播图_HTML2.3.2 中间轮播图_CSS2.4 精品推荐2.4.1 精品推荐_HTML2.4.2 精品推荐_CSS2.5 底部样式2.5.1 底部样式_HTML2.5.2 底部样式_CSS 这个文章主要是将前面学习的CSS和HTML进行一个串联。 最终样式： 图片和各种间距的测量采用photoshop。 1、分析 1.1
SpringBoot 博客开发 个人学习（项目开始和前端页面）
zcylxzyh的博客
03-13 781
博客开发前言1、需求与功能1.1 需求1.2 功能2、页面开发（非重点，可直接跳过看后台部分）2.1 首页2.2 详情页2.3 分类页 前言 功能点: 技术组合： 后端：Spring Boot +JPA + thymeleaf模板 数据库： MySQL 前端UI： Semantic UI框架 工具环境： IDEA Maven3 JDK8 Axure RP 8 1、需求与功能 1.1 需求 角色：普通访客、管理员(我) 1.2 功能 2、页面开发（非重点，可直接跳过看后台部分） 新建文件夹bo
Promise、axios 个人学习心得
zcylxzyh的博客
03-10 746
BootStrap
VueX模块化教程：详解与示例
二、在模块内定义state 每个模块都可以拥有自己的state对象，存储与该模块相关的数据。 ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值