【Vue】Vuex管理状态入门到实战 - 计数器demo - todoList项目 - 组件间共享数据 - State - Mutation - Action - Getter_最后在项目根目录(与src平级)中创建 .prettierrc 文件-CSDN博客

本文链接：https://blog.csdn.net/weixin_44972008/article/details/115427489

本文介绍了Vuex的基本概念，包括组件间数据共享、Vuex的作用，以及如何使用Vuex进行状态管理。通过计数器和TodoList项目，详细讲解了State、Mutation、Action、Getter的使用，展示了Vuex在实际项目中的应用。

摘要由CSDN通过智能技术生成

1. Vuex概述

1.1 组件间共享数据的方式

之前学习过的一些方法
【Vue】组件定义与使用-组件间通信
 【Vue】vuex - 状态自管理应用 - state - view - actions

父向子传值：v-bind 属性绑定
子向父传值：v-on 事件绑定
兄弟组件之间共享数据： EventBus

$on 接收数据的那个组件
$emit 发送数据的那个组件

1.2 Vuex 是什么（实现组件间数据共享）

Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享.
在这里插入图片描述

1.3 使用 Vuex 统一管理状态的好处

① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护
② 能够高效地实现组件之间的数据共享，提高开发效率
③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步

1.4 什么样的数据适合存储到 Vuex 中

一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；
对于组件中的私有数据，依旧存储在组件自身的 data 中即可。

2. Vuex 的基本使用

1. 安装 vuex 依赖包

cnpm install vuex --save

2. 导入 vuex 包

import Vuex from 'vuex'
Vue.use(Vuex)

3. 创建 store 对象

const store = new Vuex.Store({
   
	// state 中存放的就是全局共享的数据
	state: {
    count: 0 }
})

4. 将 store 对象挂载到 vue 实例中

new Vue({
    
	el: '#app', 
	render: h => h(app), 
	router, 
	// 将创建的共享数据对象，挂载到 Vue 实例中 
	// 所有的组件，就可以直接从 store 中获取全局的数据了 
	store
})

3. 案例项目1 计数器

推荐自动生成—在vue ui 面板中创建一个vue项目，添加vuex

Addition.vue

<template>
  <div>
    <h3>当前最新的count值为：xxx</h3>
    <button>+1</button>
  </div>
</template>

Subtraction.vue

<template>
  <div>
    <h3>当前最新的count值为：xxx</h3>
    <button>-1</button>
  </div>
</template>

App.vue

<template>
  <div>
    <my-addition></my-addition>
    <p>------------</p>
    <my-subtraction></my-subtraction>
  </div>
</template>

<script>
import Addition from './components/Addition.vue'
import Subtraction from './components/Subtraction.vue'

export default {
    
  data() {
    
    return {
    }
  },
  components: {
    
    'my-addition': Addition,
    'my-subtraction': Subtraction
  }
}
</script>

最后在项目根目录(与src平级)中创建 .prettierrc 文件，编写代码如下

{
   
    "semi":false,
    "singleQuote":true
}

4. Vuex 的核心概念

4.1 核心概念概述

Vuex 中的主要核心概念如下：

State
Mutation
Action
Getter

4.2 State （声明）

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储

例如，打开项目中的store/index.js文件，在State对象中可以添加我们要共享的数据，如：count:0

// 创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
   
	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
  }
})

组件访问 State 中数据的第一种方式

this.$store.state.全局数据名称

案例 Addition.vue

<template>
  <div>
    <h3>当前最新的count值为：{
  { $store.state.count }}</h3>
    <button>+1</button>
  </div>
</template>

组件访问 State 中数据的第二种方式

// 1. 从 vuex 中按需导入 mapState 函数
import {
    mapState } from 'vuex'

通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的

computed 计算属性：
// 2. 将全局数据，映射为当前组件的计算属性 
computed: {
    
	...mapState(['count']) 
}

案例 Subtraction.vue

<template>
  <div>
    <h3>当前最新的count值为：{
  { count }}</h3>
    <button>-1</button>
  </div>
</template>

<script>
import {
     mapState } from 'vuex'
export default {
    
  data() {
    
    return {
    }
  },
  computed: {
    
    ...mapState(['count'])
  }
}
</script>

4.3 Mutation （变化）

Mutation 用于变更 Store中的数据。
①只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
②通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化

4.3.1 触发的第一种方式

// 定义 Mutation 
const store = new Vuex.Store({
    
	state: {
    count: 0 }, 
	mutations: {
    
		add(state) {
    
			// 变更状态 
			state.count++ 
		} 
	} 
})

// 触发mutation 
methods: {
    
	handle1() {
    // 触发 mutations 的第一种方式 
		this.$store.commit('add') 
	} 
}

可以在触发 mutations 时传递参数：

// 定义Mutation
const store = new Vuex.Store({
   
	state: {
   
		count: 0
	},
	mutations: {
   
		addN(state, step) {
   
			// 变更状态
			state.count += step
		}
	}
})

// 触发mutation 
methods: {
    
	handle2() {
    
		// 在调用 commit 函数， 
		// 触发 mutations 时携带参数 
		this.$store.commit('addN', 3) 
	} 
}

案例 store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
   
  state: {
   
    count: 0
  },
  mutations: {
   
    add(state) {
   
      // 变更状态
      state.count++
    },
    addN(state, step) {
   
      // 变更状态
      state.count += step
    }
  }
})

案例 Addition.vue

<template>
  <div>
    <h3>当前最新的count值为：{
  { $store.state.count }}</h3>
    <button @click="btnHandler1">+1</button>
    <button @click="btnHandler2">+N</button>
  </div>
</template>

<script>
export default {
    
  data() {
    
    return {
    }
  },
  methods: {
    
    btnHandler1() {
    
      this.$store.commit('add')
    },
    btnHandler2() {
    
      // commit作用就是调用某个mutation函数
      this.$store.commit('addN', 3)
    }
  }
}
</script>

4.3.1 触发的第二种方式

this.$store.commit() 是触发 mutations 的第一种方式，触发 mutations 的第二种方式：

// 1. 从 vuex 中按需导入 mapMutations 函数
import {
    mapMutations } from 'vuex'

通过刚才导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法：

// 2. 将指定的 mutations 函数，映射为当前组件的 methods 函数
methods: {
   
	...mapMutations(['add', 'addN'])
}

案例 store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
   
  state: {
   
    count: 0
  },
  mutations: {
   
    add(state) {
   
      // 变更状态
      state.count++
    },
    addN(state, step) {
   
      // 变更状态
      state.count += step
    },
    sub(state) {
   
      state.count--
    },
    subN(state, step) {
   
      // 变更状态
      state.count -= step
    }
  }
})

案例 Subtraction.vue

<template>
  <div>
    <h3>当前最新的count值为：{
  { count }}</h3>
    <button @click="btnHandler1">-1</button>
    <button @click="btnHandler2">-N