Vuex

最新推荐文章于 2024-09-22 18:59:52 发布

Rich$kr

最新推荐文章于 2024-09-22 18:59:52 发布

阅读量121

点赞数

分类专栏：前端学习

本文链接：https://blog.youkuaiyun.com/dream_as_horse/article/details/89916915

版权

前端学习专栏收录该内容

12 篇文章

订阅专栏

概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

State：渲染Vue Components
Mutations：定义改变State的方法
Actions：给mutations发出指令

使用步骤

1.npm i vuex -S
2.在src里新建store目录，在里面新建index.js
3.index.js内容：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
	//使用严格模式后，state里面的值只允许在mutations中修改，只在开发模式中使用严格模式
	//strict: true
	state: {
		count: 0;
	},
	getters: {
	},
	mutations: {
	},
	actions: {
	},
	modules: {
	}

main.js引用Vuex: import store from ‘./store/index’，即可使用Vuex来管理相应页面组件
其它组件的方法中使用this.$store.commit(方法名’[,参数])来调用Vuex的mutations中的相应的方法。即：组件本身事件调用methods方法->methods的方法调用mutations的方法->mutation的方法改变state的值->state的值重新渲染组件
注 mutation的方法只能接收两个参数

注 mutation用来改数据，action用来改逻辑，module下又包含前面的几个东西

state里面的东西在组件里只能在computed里引用，因为computed有依赖

commit提交的两种方式：

this.$store.commit(方法名[,参数]) mutations中直接接收state和参数即可
this.$store.commit({
type: ‘方法名’,
[n:5]
}) mutations中需要接收state和payload，payload.n才可以调用参数

mapState：vuex提供的方法

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性

使用方法：
1.引入：import {mapState} from ‘vuex’
2.使用：computed: {…mapState([状态1，状态2，…])

actions：和mutations一样，但可以异步修改

使用方法

1.新建store目录，下面包含state、mutations、getters等文件，并在main.js引入store
2.设计state的组件状态，状态内容与组件的props一致
在这里插入图片描述
3.在需要引用子组件的父组件中引入vuex管理子组件

import { mapState } from 'vuex'
computed: {
	...mapState([
	 'cart'
	])

4.在要向父组件传数据的组件中调用mutations的方法传递数据

<span @click="addToCart({传递的数据})"></span>

methods: {
	...mapMutations([
	 'addToCart'
	])