【Vuex】Vuex详解，一篇文章搞懂Vuex详细使用过程和代码编写

本篇博客跟学视频链接：Vuex从入门到实战_bilibili

1. 组件之间数据共享

• 父向子传值：v-bind 属性绑定

• 子向父传值：v-on 事件绑定

• 兄弟组件之间共享数据：EventBus

  • $on 接收数据的那个组件

  • $emit 发送数据的那个组件

2. Vuex概述

• 实现组件全局（数据）管理的一种机制，可以方便的实现组件之间共享数据，不同于上述三种传递值的方式。
• 可以把vuex当成一个store仓库，可以集中管理共享的数据，并且存储在vuex中的数据都是响应式的，数据与页面同步。
• 一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中。

3.Vuex基本使用

1）安装vuex依赖

npm 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
})

5）利用vue ui脚手架创建vue项目

复习一下吧：[保姆级教学]使用Vue ui创建一个完整的vue项目_使用vue ui创建vue项目-CSDN博客

• 详见另一篇文档

3. 项目基础知识

1）格式化

• 项目下创建文件.prettierrc，应与.gitignore同级，两句代码分别代表：去除分号，用单引号替换双引号。

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

2）git提交

4. Vuex核心概念

1）State

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

 // 创建store数据源，提供唯一公共数据
 const store = new Vuex.Store({
   
   
 	state: {
   
    count: 0 }
 })

1：访问State方法一

• 注意在唯一根组件template中，可以省略this不写

2：访问State方法二

• 导入mapState并把所需要的State域中的属性映射为当前组件的计算属性。

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

<script>
import {
     
      mapState } from 'vuex';
export default {
     
     
    data() {
     
     
        return {
     
     }
    },
    // 把State全局域中的数据映射为我当前组件的计算属性
    computed: {
     
     
        ...mapState(['count'])
    }
}
</script>

2）Mutation

store.js

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

Vue.use(Vuex)

export default new Vuex.Store({
   
   
  <