当前位置:首页 > 前端技术 > vue——vuex

vue——vuex

2022年09月16日 20:05:46前端技术6

npm安装

cnpm install vuex --save

使用vuex

vue——vuex _ JavaClub全栈架构师技术笔记

store中 state、getters、mutations的使用

  • new Vuex.Store注意new的是Vuex下的Store,并且首字母大写
  • 引用export default的文件,用import Vuex from ‘vuex’;引用export的文件,用import {INCREMENT} from './mutations.types’
  • Vue.set(state.info,‘address’,‘洛杉矶’)——修改元素中的字段,实现响应式(页面也跟着修改)
  • Vue.delete(state.info,‘age’)——删除元素中的字段,实现响应式
  • getters中可以引用自己的方法
more20Length(state, getters) {
            return getters.more20.length
        },
  • 属性中使用变量(age是方法中传过来的变量)
app.vue
<h2>{
    {$store.getters.moreage(3)}}</h2>


getters中的方法
//获取大于传过来变量的元素
moreage(state) {
    return age => state.student.filter(s => s.age > age)
}
  • payload(对象的形式传递变量)
app.vue中的methods中的方法
addstu(){
 const stu = {name:'yyy',age:15};
 // this.$store.commit('addstudent',stu)
 this.$store.commit({
   type:'addstudent',
   stu
 })
},

store中index.js中的mutations中的方法
addstudent(state,payload){
   // state.student.push(stu)
   console.log(payload);
   
   state.student.push(payload.stu)
},
store>mutations.types.js
export const INCREMENT = 'increment'
store>index.js
import Vue from 'vue'
import Vuex from 'vuex'
import {INCREMENT} from './mutations.types'
//安装插件
Vue.use(Vuex)

//创建对象
const store = new Vuex.Store({
    state: {
        counter: 10,
        student: [{ name: 'yss', age: 27 }, { name: 'he', age: 25 }, { name: 'hqc', age: 2 }],
        info:{
            name:'cobe',
            age:30
        }
    },
    //方法
    mutations: {
        [INCREMENT](state) {
            state.counter++
        },
        decrement(state) {
            state.counter--
        },
        addstudent(state,payload){
            // state.student.push(stu)
            console.log(payload);
            
            state.student.push(payload.stu)
        },
        updateyss(state){
            //此写法不是响应式,不会改变页面的值
            // state.info.name = 'update';
            // Vue.set(state.info,'address','洛杉矶')
            Vue.delete(state.info,'age')
            console.log(state.info);
            
        }
    },
    actions: {

    },
    getters: {
        //筛选数组
        more20(state) {
            return state.student.filter(s => s.age > 20)
        },
        //获取指定的元素
        getyss(state) {
            return state.student.filter(s => s.name == 'yss')
        },
        //获取长度(直接使用getters中的属性)
        more20Length(state, getters) {
            return getters.more20.length
        },
        //获取大于传过来变量的元素
        moreage(state) {
            return age => state.student.filter(s => s.age > age)
        }
    },
    modules: {

    } 
})
//导出store独享
export default store
APP.vue
<template>
  <div id="app">
    <router-view/>
    <h2>----------父页面----------</h2>
    <h2>{
    {$store.state.counter}}</h2>
    <h2>------------getters例子-------------</h2>
    <!-- <h2>{
    {$store.getters.more20}}</h2> -->
    <h2>{
    {$store.getters.getyss}}</h2>
    <!-- <h2>{
    {$store.getters.more20Length}}</h2> -->
    <!-- <h2>{
    {$store.getters.moreage(3)}}</h2> -->

    <h2>{
    {$store.state.info}}</h2>
    <button @click="add">加</button><button @click="de">减</button><button @click="addstu">加学生</button><button @click="updatestu">修改学生</button>
    <h2>-------------子页面-----------------</h2>
    <main-tar-bar/>
  </div>
</template>

<script>
import MainTarBar from '@/components/contents/maintarbar/MainTarBar'
import {INCREMENT} from '@/store/mutations.types'
import '@/assets/css/base.css'
export default {
  name: 'App',
  components:{
    MainTarBar
  },
  methods:{
    add(){
      this.$store.commit(INCREMENT)
    },
    de(){
      this.$store.commit('decrement')
    },
    addstu(){
      const stu = {name:'yyy',age:15};
      // this.$store.commit('addstudent',stu)
      this.$store.commit({
        type:'addstudent',
        stu
      })
    },
    updatestu(){
      this.$store.commit('updateyss')
    }
  }
}
</script>


作者:没错就是我哎呀
来源链接:https://blog.csdn.net/he3236220/article/details/108104468

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42218.html

标签: vue
分享给朋友:

“vue——vuex” 的相关文章

一步步使用SpringBoot结合Vue实现登录和用户管理功能

一步步使用SpringBoot结合Vue实现登录和用户管理功能

前后端分离开发是当今开发的主流。本篇文章从零开始,一步步使用SpringBoot结合Vue来实现日常开发中最常见的登录功能,以及登录之后对用户的管理功能。通过这个例子,可以快速入门SpringBoot+Vue前后端分离的开发。 前言 1、前后端分离简介 在这里首先简单...

vue和Springboot的整合

vue和Springboot的整合

vue和Springboot整合 vue和Springboot整合实现前后端分离 第一步: 分别创建两个项目一个为vue项目一个为Springboot项目分别用idea进行打开【vue项目也可以用webStrom打开】 第二步: 端口设置,先...

《Asp.Net Core3 + Vue3入坑教程》-1.Net Core项目搭建与Swagger配置步骤

《Asp.Net Core3 + Vue3入坑教程》-1.Net Core项目搭建与Swagger配置步骤

简介 《Asp.Net Core3 + Vue3入坑教程》 此教程适合新手入门或者前后端分离尝试者。可以根据图文一步一步进操作编码也可以选择直接查看源码。每一篇文章都有对应的源码 教程后期会将 .Net Core 3升级成 .Net Core 5 目...

SpringBoot + easyexcel + vue 下载 excel 问题

最近有个下载 excel 的需求,后端导出 excel 我选用了 easyexcel,但是 vue 前端老是下载不了,发现网上写的很多普遍的方法用着不行。查了下发现了可行的方法,这里写下总结。 1. 后端 不知为啥用 Post 请求下载不了,这里改...

vue框架中更改body,html页面背景颜色

beforeCreate () { document.querySelector('body').setAttribute('style', 'background-color:#fff') }, beforeDestroy () { document.query...

vue init webpack 建vue项目报错的解决方法

vue init webpack my-project   C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.ar...

vue 项目实战 (vue全家桶之--- vuex)

老规矩先安装 npm install vuex --save 在看下面内容之前 你应该大概的看了一边vuex官方的文档对vuex有个大概对了解 首先 vuex 是什么? vuex 是属于vue中的什么,它在项目中扮演着一个什么样的角色,起...

Vue系列教程(一)基础介绍

什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也可以进行手机App的开发,需要借助Weex) Vue.js 是前端的主流框架之一,...

vue 实现同步

vue 实现同步

我们在调用接口的时候,使用的是异步方式。很多时候我们想用接口返回的数据时,得不到想要的数据。因为这时接口还没有调用完。使用的异步方式,所以我们需要让接口进行同步请求。 所以我们需要再函数前面 加上 async ,在接口前面加上 await,也就是需要同步的...

vue中使用axios最详细教程

前提条件:vue-cli 项目 安装: npm axios from 'axios' 较科学的封装好的axios:(new-axios.js) import axios fr...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。