Vuex基础学习

最新推荐文章于 2022-11-14 14:36:08 发布
最新推荐文章于 2022-11-14 14:36:08 发布
阅读量958 收藏 1
点赞数
文章标签： vue.js vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47807991/article/details/123826178
版权

一、Vuex单界面到多界面状态管理切换：

①安装配置vuex：

step1.下载vuex

npm install vuex --save

step2.因为所有文件导入都堆积在main.js里太过繁杂，所以新建一个store文件夹 里面存放index.js：

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

// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const store = new Vuex.Store({
  state: {
    counter: 1000
  },
  mutations: {

  },
  actions: {

  },
  modules: {

  }
})

// 3.导出store对象
export default store

3.将store挂载到main.js在这里插入图片描述4.使用方法：$store.state
通过这个方式，能直接使用state里的数据。

<template>
 <div>
   <h2>{{$store.state.counter}}</h2>
 </div>
</template>

<script>
 export default {
  name: 'HelloVueX' ,
 data () {
 return {
  }
 }
}

</script>
<style scope>
</style>

二、Vuex-devtools和mutations

①devtools插件

在Chrome安装devtools插件打开项目之后：
在这里插入图片描述

就可以看见vue项目的基本结构：
在这里插入图片描述

可以看到和实时监控state的数据
在这里插入图片描述

 <h2>{{$store.state.counter}}</h2>
 <button @click="$store.state.counter++">+</button>
 <button @click="$store.state.counter--">-</button>

在这里插入图片描述

可以发现，我们直接通过$store.state.counter++来处理数据是不会对state里的counter有影响的。

②mutations：

所以要想修改state的数据必须通过mutations：
step1.在mutation里写方法：

const store = new Vuex.Store({
  state: {
    counter: 1000
  },
  mutations: {
    // 方法
    increment() {
      this.state.counter++
    },
    decrement() {
      this.state.counter--
    }
  },
  actions: {

  },
  modules: {

  }
})

step2.在组件里写方法提交：

methods: {
        addition() {
          this.$store.commit('increment')
        },
        subtraction() {
          this.$store.commit('decrement')
        }
      },

<template>
  <div id="app">
    <h2>App里的内容————————————————————————————————</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>

    <hello-vuex/>
  </div>
</template>
<script>
import HelloVuex from './components/HelloVuex'
  export default {
    name: 'App',
    data() {
        return {
          massage: '我是App里的massage',
        }
      },
      methods: {
        addition() {
          this.$store.commit('increment')
        },
        subtraction() {
          this.$store.commit('decrement')
        }
      },
    components: {
      HelloVuex
    }
  }
</script>

在这里插入图片描述

三、Vuex核心概念：

在这里插入图片描述

Vuex有几个比较核心的概念:

  • State
  • Getters
  • Mutation
  • Action
  • Module
①Vuex-state单一状态树：

(单一数据源)
一个项目只有一个store

  • 如果你的状态信息是保存到多个Store对象中的,那么之后的管理和维护等等都会变得特别困难。
  • 所以Vuex也使用了单一 状态树来管理应用层级的全部状态。
  • 单一状态树能够让我们最直接的方式找到某个状态的片段,而且在之后的维护和调试过程中,也可以非常方便的管理和维护。

②vuex-getters的使用：

其实可以当成组件共享的计算属性

例：写一个对象数组，找出里面age>20的对象
普通写法：

state: {
    counter: 1000,
    students: [
      {id:110, name: 'he' , age: 18},
      {id:111, name: 'li' , age: 20},
      {id:112, name: 'ha' , age: 21},
      {id:113, name: 'ss' , age: 19},
    ]
  }

 computed: {
        moreThan20() {
          return this.$store.state.students.filter(s => s.age > 20)
        }
      }

<h2>{{moreThan20}}</h2>

但这种写法只能在需要的每个组件里都写上这个计算属性
如果写在getters里面 每个组件都可以直接使用：
getters：

const store = new Vuex.Store({
  state: {
    students: [
      {id:110, name: 'he' , age: 18},
      {id:111, name: 'li' , age: 20},
      {id:112, name: 'ha' , age: 21},
      {id:113, name: 'ss' , age: 19},
    ]
  },
  getters: {
    //这里要传参
    moreThan20(state) {
      return state.students.filter(s => s.age > 20)
    }
  }
})

使用方法：

<h2>{{$store.getters.moreThan20}}</h2>

另外，在getters的方法里也可以将getters作为参数，调用getters里的其他方法：

 		moreThan20(state) {
      return state.students.filter(s => s.age > 20)
    },
    moreThan20Length(state, getters) {
      return getters.moreThan20.length
    }

如何传入一个参数呢？
moreThan20Length(state, age)
不能这样写，这样写第二个参数还是会被当成getters。
正确方法：

moreAgeStu(state) {
      return function(age) {
        return state.students.filter(s => s.age > age)
      }
  
//箭头函数写法：
return age => { 
	return state.students.filter(s => s.age >age) 
}

moreAgeStu(8)

③Mutation状态更新：

state里的数据改变只能通过Mutation！

有参数传递的例子
参数被称为mutation的payload（载荷）
index.js中：

mutations: {
    // 方法
    incrementCount(state,count) {
      state.counter += count
    }
  }

组件中：

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

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

在这里插入图片描述

mutation的提交风格：
之前的commit只是一种普通的提交风格
特殊的提交风格：
Vue还提供了另外-种风格,它是一个包含type属性的对象

this.$store.commit({
   type: 'changeCount',
   count
})

Mutation中的处理方式是将整个commit的对象作为payload使用,所以代码没有改变,依然如下:

changeCount(state,payload){
  state.count = payload.count
}

④Vuex的响应式原理：

Vuex的store中的state是响应式的,当state中的数据发生改变时, Vue组件会自动更新.
这就要求我们必须遵守一些Vuex对应的规则:
提前在store中初始化好所需的属性.
当给state中的对象添加新属性时,使用下面的方式:
➢方式一: 使用Vue.set(obj, ‘newProp’, 123）
➢方式二:用新对象给旧对象重新赋值

//info是一个对象
//如果想往这个对象里面添加新的属性并做到响应式 只能用vue.set
vue.set(state.info, 'address' , '洛杉矶')

//同样的如果想删除这个属性：
vue.delete(state.info, 'address')

⑤vue-mutations的类型常量：

可以在store里加一个js文件：
在这里插入图片描述

然后通过这样的方式定义常量：

export const INCREMENT = 'increment'

别的文件中导入后即可使用：
在这里插入图片描述

导入：

import{
  INCREMENT
} from './mutations-type'

使用：

mutations: {
    // 方法
    [INCREMENT]() {
      this.state.counter++
    }
}

methods: {
  addition() {
  this.$store.commit(INCREMENT)
  }
}

⑥vuex-actions的使用：

mutation里的所有代码都不能有异步操作：
如果有异步操作，就用actions来替代Mutations
但是actions任然不能直接修改state里的数据，如果有一个异步操作需要修改state里的数据，那么正确的方法应该是：
index.js:

state: {
    info:{
      name: 'he',
      age: 18
    }
  }

mutations: {
    updateInfo(state) {
      state.info.name = 'hels'
    }
  }

actions: {
    // 默认属性context 上下文
    aUpdateInfo(context) {
      setTimeout(() => {
        context.commit('updateInfo')
      }, 1000);
    }
  }

组件中：

 methods: {
    updataInfo() {
       this.$store.dispatch('aUpdateInfo')
    }
 }

dispatch:
在这里插入图片描述

context后面也可以接一个传递参数payload：

aUpdateInfo(context,payload) {
      setTimeout(() => {
        context.commit('updateInfo');
        console.log(payload);
      }, 1000);
    }

 this.$store.dispatch('aUpdateInfo','我是携带的信息')

但是通常携带的信息不只一个的时候怎么办呢：可以将payload作为一个对象：

updataInfo() {
  this.$store.dispatch('aUpdateInfo',{
  massage: '我是携带的信息',
  success: () => {
  	console.log('里面已经完成')
  }
  })
}

aUpdateInfo(context,payload) {
        setTimeout(() => {
          context.commit('updateInfo');
          console.log(payload.massage)
          payload.success()
        }, 1000);
    }

更简洁优雅的写法：Promise：

aUpdateInfo(context,payload) {
      return new Promise((resolve,reject) => {
        setTimeout(() => {
          context.commit('updateInfo');
          console.log(payload.massage)
          payload.success()
          resolve('1111')
        }, 1000);
      })
    }

this.$store
.dispatch('aUpdateInfo','我是携带的信息')
.then(res => {
   console.log('里面完成了提交')
   console.log(res)
})

⑦vuex-modules的使用：

Vue使用单-状态树,那么也意味着很多状态都会交给Vuex来管理.
当应用变得非常复杂时,store对象就有可能变得相当臃肿，为了解决这个问题，Vuex允许我们将store分割成模块(Module),而每个模块拥有自己的state. mutations、actions, getters等。
在这里插入图片描述

1.modules的state：
const moduleA = {
  state: {
    name: 'jing'
  },
  mutations: {},
  actions: {},
  getters: {},

}

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  modules: {
    a: moduleA
  }
})

 <h2 style="color:#FF8484">{{$store.state.a.name}}</h2>

这里只能用
$store.state.a.name
而不是.modules.a
因为在Devtools里可以看到 a会自动变成state的一个对象：
在这里插入图片描述

2.modules的mutation：
const moduleA = {
  state: {
    name: 'jing'
  },
  mutations: {
    updateName(state,payload) {
      state.name = payload
    }
  },
  actions: {},
  getters: {},

}

const store = new Vuex.Store({
  state: {
    name: 'jing'
  },
  mutations: {},
  actions: {},
  getters: {},
  modules: {
    a: moduleA
  }
})

 methods: {
   updateName() {
     //这里还是commit
      this.$store.commit('updateName','yang')
   }
 }

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

在这里插入图片描述

在这里插入图片描述

3.modules的getters：

无论是定义在store里的getters还是定义在modules里的getters 调用的方法都相同：

const moduleA = {
  state: {
    name: 'jing'
  },
  mutations: {},
  getters: {
    fullname(state) {
      return state.name + 'hahaha'
    }
  },
  actions: {}
}

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

我们都知道getters里的方法可以将本身getters作为参数来调用里面的其他函数：

 getters: {
    fullname(state) {
      return state.name + 'hahaha'
    },
    fullname2(state,getters) {
      return getters.fullname + '33'
    }
 }

而且，在modules中的getters还可以将store里的state作为参数：

getters: {
    fullname(state) {
      return state.name + 'hahaha'
    },
    fullname2(state,getters) {
      return getters.fullname + '33'
    },
    fullname3(state,getters,rootState) {
      return getters.fullname2 + rootState.counter
    }
  }

const store = new Vuex.Store({
  state: {
    counter: 1000
  }
})

4.modules的actions：

跟store的actions没什么差别：
在这里插入图片描述

写在modules里的actions commit时是commit的modules的mutation
但是如果想要commit store的mutation的话：

context.rootGetters

⑧vuex-store文件夹的目录组织：

1.state的抽离：
const state =  {
  counter: 1000,
  students: [
    {id:110, name: 'he' , age: 18},
    {id:111, name: 'li' , age: 20},
    {id:112, name: 'ha' , age: 21},
    {id:113, name: 'ss' , age: 19},
  ],
  info:{
    name: 'he',
    age: 18
  }
}

const store = new Vuex.Store({
  state,
}

2.mutations的抽离：

新建一个mutations.js:
在这里插入图片描述

import{
  INCREMENT
} from './mutations-type'

export default {
  // 方法
  [INCREMENT]() {
    this.state.counter++
  },
  decrement() {
    this.state.counter--
  },
  incrementCount(state,count) {
    state.counter += count
  },
  addStudent(state,stu) {
    state.students.push(stu)
  },
  updateInfo(state) {
    state.info.name = 'hels'
  }
}

然后：
在这里插入图片描述

import mutations from './mutations';

const store = new Vuex.Store({
  state,
  mutations,
}

3.actions的抽离：

和mutation一样可以抽离成一个函数：

export default {
  // 默认属性context 上下文
  aUpdateInfo(context,payload) {
    setTimeout(() => {
      context.commit('updateInfo');
      console.log(payload);
    }, 1000);
  },
  aUpdateInfo(context,payload) {
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        context.commit('updateInfo');
        console.log(payload.massage)
        payload.success()
        resolve('1111')
      }, 1000);
    })
  }
}


import actions from './actions'

const store = new Vuex.Store({
  state,
  mutations,
  actions,
}

4.getters的抽离：

同理：

export default{
  powerCounter() {
    return this.state.counter * this.state.counter
  },
  moreThan20(state) {
    //这里要传参
    return state.students.filter(s => s.age > 20)
  },
  moreThan20Length(state, getters) {
    return getters.moreThan20.length
  },
  moreAgeStu(state) {
    // return function(age) {
    //   return state.students.filter(s => s.age > age)
    // }
    return age => { return state.students.filter(s => s.age >age) }
  }
}

import getters from './getters';

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
}

5.modules的抽离：

新建一个modules文件夹：
在下面创建一个moduleA文件：
在这里插入图片描述

moduleA.js:

export default {
  state: {
    name: 'jing'
  },
  mutations: {
    updateName(state,payload) {
      state.name = payload
    }
  },
  getters: {
    fullname(state) {
      return state.name + 'hahaha'
    },
    fullname2(state,getters) {
      return getters.fullname + '33'
    },
    fullname3(state,getters,rootState) {
      return getters.fullname2 + rootState.counter
    }
  },
  actions: {
    aupdateName(context) {
      setTimeout(() => {
        context.commit('updateName','hels33')
      }, 1000);
    }
  }
}


import moduleA from './modules/moduleA';

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    a: moduleA
  }
})
小何同学－
关注
生命周期函数和vuex基础学习（一）
weixin_44297477的博客
04-17 1452
一、生命周期函数 1，什么是生命周期函数 生命周期函数是一个组件从创建到销毁的过程，只能执行一次。 2，生命周期函数的钩子函数 beforeCreate——-此时尚未初始化vue实例 create——此时数据绑定，事件已完成初始化，data和methods已经可以取值 beforeMount——-在编译结束时被调用 mount———在编译结束时调用。此时，所有指令已生效，数据变化已可以触发DOM更新，但不保证mel已插入文档 beforeUpdate———实例挂载好后，再次更新实例时被调
一篇文章概述Vue全家桶之Vuex基础学习
道阻且长
08-25 206
Vue全家桶之Vuex基础学习
vuex 入门详解（一）
weixin_34306446的博客
07-27 302
如果你在使用vue.js, 那么我想你可能会对 vue 组件之间的通信感到崩溃 。 我在使用基于 vue.js 2.0 的UI框架ElementUI开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 : <!--父组件中引入子组...
Vuex学习
xuan971130的博客
04-27 1566
一、Vuex是做什么的 状态管理工具：多个组件共享状态（可以先简单理解成变量） 所有的组件都继承自vue的原型：可以通过在prototype中加属性实现上述对象，但是通过这种方式，无法实现响应式。 二、vue需要管理什么状态呢 ...
从头开始学习Vuex
weixin_34234823的博客
10-10 139
一、前言 当我们的应用遇到多个组件共享状态时，会需要多个组件依赖于同一状态抑或是来自不同视图的行为需要变更同一状态。以前的解决办法： a.将数据以及操作数据的行为都定义在父组件; b.将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递) 传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。在搭建下面页面时，你可能会对 vue 组件之间的通信感到崩溃 ，特...
vuex个人学习笔记代码
04-16
2. **State**：State是Vuex中最基础的部分，它可以是任何JavaScript可序列化的值。例如，你可以定义一个对象，包含多个属性，如用户信息、列表数据等。当需要改变state时，必须通过mutation进行，以确保状态变化的可...
vuex基础的知识.7z
06-08
这个压缩包文件"vuex基础的知识.7z"包含了关于 Vuex 的基础知识，以及一些核心特性的详细讲解，非常适合想要深入了解 Vuex 的 Vue 开发者。 首先，我们来详细了解一下 Vuex 的核心概念： 1. **状态（State）**：在...
vuex学习
John的博客
04-24 210
核心概念 1State 定义变量和属性 const state = { count: 0 } 获取 $store.state.count mapState辅助函数 import { mapState } from 'vuex' export default { // ... computed: mapState({ // 箭头函数可使代码更简练 ...
vuex的学习
qq_53841687的博客
08-17 546
专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应 用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。原理图：Vue.js 的中心化状态管理方案vuex多应用于多个组件应用与同一个状态，多个组件变更同一状态。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。什么是“状态管理模式”？状态。...
Vue学习—vuex
最新发布
H215919719的博客
11-14 665
​ 在开发中，我们会让应用程序需要处理各种各样的数据，这些数据需要保存在我们应用程序中的某一个位置，对于这些数据的管理我们就 称之为是状态管理。​ 在前面我们是如何管理自己的状态呢？​ 在Vue开发中，我们使用组件化的开发方式:在组件中我们定义data或者在setup中返回使用的数据，这些数 据我们称之为state；在模块template中我们可以使用这些数据，模块最终会被渲染成DOM，我们称之为View；
vuex基础学习
weixin_33787529的博客
02-19 111
vuex用来做什么？ 答：vuex为存储我们共享数据的一个仓库 安装 在vue-cli 3框架中使用 vue add vuex 复制代码在vue-cli 2中使用 npm install vuex -save 复制代码引入vue项目 *使用时记得要将store.js文件引入到main.js中才可使用 import store from './store'; new Vue({ 'el'...
vuex 学习
青蛙king的博客
08-08 989
vuex 的工作原理—— https://www.jianshu.com/p/d95a7b8afa06
手把手教你实现Vuex基础与自定义Store示例
本文档是一份关于如何实现Vuex原理的实战教程，主要针对初学者进行引导。首先，它介绍了在Vue.js项目中集成Vuex的基本步骤，包括...无论是初次接触Vuex还是希望深入理解其工作原理，这份示例都是一个很好的学习资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值