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