构建多组件 数据共享环境
vuex规定Vue版本是vue3，在此进行使用 npm install vuex --force 该命令忽略npm 忽略这种对等依赖的冲突情况，强制安装vuex
<!-- APP.vue -->
<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'
// console.log(mapState(['count', 'title']))
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>
<!-- Son1 -->
<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 -->
<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>
多组件共享同一份数据，仓库取存放通用数据
创建一个空仓库
src下新建文件夹store，文件夹下新建文件index.js
进行插件安装，创建仓库，导出仓库
在main.js中导入和挂载
一旦仓库配置成功，所有组件都能访问到 ，且控制台能打印出来。如果未配置成功，那么控制台会显示undefined
state状态
通过store访问
在index.js中创建仓库，在状态state中提供数据title和count
通过App.vue的模板访问 {{$store.state.title}} {{$store.state.count}}
通过Son1.vue模板访问，与App.vue中一样
通过App.vue中js访问
maIn.js导入了Vuex,直接能访问到state中的数据
通过辅助函数访问（简化） mapState。
每次要使用state中的数据总是要写store.state.count一长串，很麻烦，用辅助函数简化
在需要使用state中的数据的组件中导入辅助函数mapState,在计算属性中将其展开，将要使用的数据进行映射
在该组件中就能直接通过count和title进行访问了
mutations在store仓库中提供修改数据的方法
在button中注册点击事件，在事件中直接通过this.$store.state.count++是能将数据进行修改的，但是不规范
index.js中通过严格模式进行 规范
mutations修改数据
在仓库中通过mutations提供修改数据的方法，每个方法第一个参数都是state
在button中注册点击事件，在事件中调用index.js中修改数据的方法，从而达到在组件中通过点击，使得 仓库中修改数据，那么所有使用该数据的组件相应部分数据就会随之改变
下边store前边忘记加上$了
mutations在store中进行传参
希望+1 ，+5，+10能公用一个方法
在mutations中不将数字写死，另外再写一个参数n，用于接收点击按钮事件时传递来的参数，那么该函数就可以用于好几个按钮点击加值
不用的点击按钮传递过来不同的参数，handleAdd接收参数，作为要修改部分调用addCount进行修改数据
还可以将标题进行修改
在mutations中的方法里边除了state之外，只能再有一个参数，例如addCount(state,n)，除此之外不能再有参数，如果还需要传递参数进来，那么只能是除了state之外加上一个对象
mutations练习
输入框和state中的count绑定
不能用v-model,因为vuex中是单向数据流，用 ：value 和@input
点击按钮修改了值，那么输入框中的值也会跟着变化，但是修改输入框的值却不能修改显示的count的值，说明修改输入框的值仓库中状态并没有更新
如果需要修改输入框的值也一并修改仓库的值，那么就需要监听输入框的输入，拿到值以后提交到mutation更新到仓库
现在点击按钮输入框中也会渲染相应变化了的count，而且输入框输入了值也会将仓库中count修改为相应的值 （@input监听输入框的值，将值提交到mutation，调用mutation方法修改数据）