7、Vue 核心技术与实战 day07

1.1 vuex概述

1.2 构建 vuex [多组件数据共享] 环境

1.创建项目

vue create vuex-demo

2.创建三个组件, 目录如下

|-components
|--Son1.vue
|--Son2.vue
|-App.vue

3.源代码如下

App.vue在入口组件中引入 Son1 和 Son2 这两个子组件

<template>
  <div id="app">
    <h1>根组件</h1>
    <input type="text">
    <Son1></Son1>
    <hr>
    <Son2></Son2>
  </div>
</template>

<script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'

export default {
     
  name: 'app',
  data: function () {
     
    return {
     

    }
  },
  components: {
     
    Son1,
    Son2
  }
}
</script>

<style>
#app {
     
  width: 600px;
  margin: 20px auto;
  border: 3px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
   
  render: h => h(App)
}).$mount('#app')

Son1.vue

<template>
  <div class="box">
    <h2>Son1 子组件</h2>
    从vuex中获取的值: <label></label>
    <br>
    <button>值 + 1</button>
  </div>
</template>

<script>
export default {
     
  name: 'Son1Com'
}
</script>

<style lang="css" scoped>
.box{
     
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
     
  margin-top: 10px;
}
</style>

Son2.vue

<template>
  <div class="box">
    <h2>Son2 子组件</h2>
    从vuex中获取的值:<label></label>
    <br />
    <button>值 - 1</button>
  </div>
</template>

<script>
export default {
     
  name: 'Son2Com'
}
</script>

<style lang="css" scoped>
.box {
     
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
     
  margin-top: 10px;
}
</style>

1.3 创建一个空仓库

PS:
vue2对应router3、vuex3
vue3对应router4、vuex4
因为创建vue时没有勾选vuex，所以要装包，勾选就不需要装包了

src → store → index.js

// 在这里存放的就是 Vuex 相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'

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

// 创建仓库
const store = new Vuex.Store()

// 导出给main.js使用
export default store

main.js

import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'

Vue.config.productionTip = false

new Vue({
   
  render: h => h(App),
  store
}).$mount('#app')

1.4 核心概念 - state 状态

目标：明确如何给仓库 提供 数据，如何 使用 仓库的数据

1. 提供数据：

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 中的 State 中存储。
在 state 对象中可以添加我们要共享的数据。

src - store - index.js

// 在这里存放的就是 Vuex 相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'

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

// 创建仓库
const store = new Vuex.Store({
   
  // 通过state可以提供数据（所有组件共享的数据）
  state: {
   
    title: '大标题',
    count: 100
  }
}
)

// 导出给main.js使用
export default store

2. 使用数据：

① 通过 store 直接访问

App.vue

<template>
  <div id="app">
    <h1>根组件 - {
  { $store.state.title }}</h1>
    <input type="text">
    <Son1></Son1>
    <hr>
    <Son2></Son2>
  </div>
</template>

<script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'

export default {
     
  name: 'app',
  created () {
     
    console.log(this.$store.state.title)
  },
  data: function () {
     
    return {
     

    }
  },
  components: {
     
    Son1,
    Son2
  }
}
</script>

<style>
#app {
     
  width: 600px;
  margin: 20px auto;
  border: 3px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'
console.log(store.state.count)

Vue.config.productionTip = false

new Vue({
   
  render: h => h(App),
  store
}).$mount('#app')

② 通过辅助函数 (简化)
mapState是辅助函数，帮助我们把 store中的数据 自动 映射到 组件的计算属性中

App.vue

<template>
  <div id="app">
    <h1>根组件 - {
  { title }}</h1>
    <input type="text">
    <Son1></Son1>
    <hr>
    <Son2></Son2>
  </div>
</template>

<script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
import {
      mapState } from 'vuex'
console.log(mapState(['count', 'title']))

export default {
     
  name: 'app',
  created () {
     
    console.log(this.$store.state.title)
  },
  computed: {
     
    ...mapState(['count', 'title'])
  },
  data: function () {
     
    return {
     

    }
  },
  components: {
     
    Son1,
    Son2
  }
}
</script>

<style>
#app {
     
  width: 600px;
  margin: 20px auto;
  border: 3px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}
</style>

1.5 核心概念 - mutations

son.vue(不开严格模式可以用)

methods: {
   
    handleAdd () {
   
      // 错误代码（vue默认不会监测，检测需要成本）
    //   this.$store.state.count++
    //   console.log(this.$store.state.count)

    // 应该通过 mutation 核心概念，进行修改数据
    }
  }

str - store - index.js

 mutations: {
   
    // 所有mutation函数，第一个参数，都是state
    addCount (state) {
   
      // 修改数据
      state.count += 1
    },
    addFive (state) {
   
      state.count += 5
    }
  }

Son1.vue

methods: {
   
  handleAdd () {
   
    // 错误代码（vue默认不会监测，检测需要成本）
  //   this.$store.state.count++
  //   console.log(this.$store.state.count)

    // 应该通过 mutation 核心概念，进行修改数据
    this.$store.commit('addCount')
  },
  addFive () {
   
    this.$store.commit('addFive')
  }
}
}

str - store - index.js

mutations: {
   
    // 所有mutation函数，第一个参数，都是state
    addCount (state, n) {
   
      // 修改数据
      state.count += n
    },
    changeTitle (state, newTitle) {
   
      state.title = newTitle
    }
  }

Son1.vue

methods: {
   
  handleAdd (n) {
   
    // 错误代码（vue默认不会监测，检测需要成本）
  //   this.$store.state.count++
  //   console.log(this.$store.state.count)

    // 应该通过 mutation 核心概念，进行修改数据
    //   this.$store.commit('addCount')

    // 调用带参数的mutation函数
    this.$store.commit('addCount', n)
  },
  changeFn () {
   
    this.$store.commit('changeTitle', '黑马程序员')
  }
}

1.5.1 核心概念 - mutations - 练习1

str - store - index.js

 //   2.通过mutations可以提供修改数据的方法
  mutations: {
   
    // 所有mutation函数，第一个参数，都是state
    addCount (state, n) {
   
      // 修改数据
      state.count += n
    },
    subCount (state, n) {
   
      state.count -= n
    },
    changeTitle (state, newTitle) {
   
      state.title = newTitle
    }
  }

Son2.vue

 methods: {
   
    handleSub (n) {
   
      this.$store.commit