1021 vuex 组件间的通信 One day
主要讲
ECharts 以后用的非常多，还有 DataV(用的不是很多) 如果项目中有一个图表，是用什么做的，自己写的话要回 svg canvas 学会了可以专攻这个专业，有关数学的一些知识，相对比较麻烦。还有 AntV G2(相对比较多一点 还有语雀文档) 可视化的图形语法 蚂蚁出的 D3(全英文的)查别人写好的例子是用。我们下载的包都是在 npm 下载的，yarn 也是从网上下载安装包的,但是和 npm 不能同时在一个项目中使用。开始 vue 的进阶部分 vuex:组件间通信的终极解决办法.安装 vuex 公共样式 global.css 仓库 store.js问题:简化复杂的操作用计算属性，获取 store 的数据搭配计算属性去使用， 不明白 computed 是什么问题:store.num修改成 x.num 行不行，原因:别人写好的东西不能随便的修改，或者你写的东西放在 Store 里面他不到一定能认识，我可以不识别你写的方法，所以说不可能修改，要根据他的方法规定好，不是两边写了一样方法名就能用，是他的方法里面已经写好了配置项 state 了，你怎么去改他的 state 呢 他有他的意思,不是你想改就能改。点击 handleClick() 修改 srote 的值 不推荐使用，正确方法:组件通过store 的事件方法 commit 调用 store.js 里面的 mutations 对象内的方法进行修改有用!装 Devtools 的一个工具，安装方法也有。在 mutations 对象中设置多个修改的方法以及commit 传的参数是对象的方法，还有传参的时候需要注意的一些事项。
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
vue 进阶 vuex:组件间的通信的终极解决办法，组件间交互比较多的就可以使用。
要什么数据跟 vuex 要，改什么也叫 vuex 改做项目必须会的一个知识点，用不用就另说。
介绍
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是
Flux 架构就像眼镜：您自会知道什么时候需要它。
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
安装
npm install vuex --save 或者图形化界面安装 运行依赖 vuex在 assets 文件夹中写全局的公共样式 global.css 引到 main.js 中创建 vuex 在根目录 src 下需要创建一个 store.js 仓库,里面写着我们的共享数据。
导入创建导出引入
计算属性 computed
获取 store.js 里面的数据----获取 store 数据搭配计算属性 computed 简化操作。
<p>展示 store 内共享的数据:{{ num }}
</p>
computed
: {
num(){
return this.$store
.state
.num
}
}
修改 state 的状态
下列是不可取的方法
handleUpdate(){
this.$store
.state
.num
= 6666
}
上述操作可以修改 store 内的数据，但是绝对不能使用，就和我们之前说的，当 props 是对象的时候子组件不能直接修改，这样修改了之后追踪不到修改的来源,谁的状态要通过谁的事件去修改才行。
想要修改 store 内的数据，必须使用 commit 来触发mutation 函数
如何获取 commit ,如何通过 commit 触发mutation
在组件内直接导入 store , store 内默认就有 commit 方法。import store from '../store'使用 store.commit('StateUpdate')
第一个参数叫 state, state 是个对象用来放组件共享的数据
在这里放的就是共享的组件数据 mutations 方法修改 store 内数据的方法。
更新的方法内默认接收 state 对象 作为第一个参数需要的话可以设置第二个参数接收 commit 传递的第二个参数。对象内可以设置两个属性type payload,载荷数据不能设置第三个或者多个，那么想要传递多条数据可以将第二个参数设置成对象。commit 提交 mutation 可以直接使用 对象形式提交，那么 mutation 函数的第二个参数就会接收这个对象。
再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。
由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。
Vuex 状态管理模式
就是实现组件之间交互的终极方案。将组件需要交互的数据(data),共享到 vuex 创建的 store(仓库) 内。
Vuex 的创建
安装 vuex npm i vuex
在 src 下新建 store.js 文件用来创建 store store.js
import Vue
from "vue";
import Vuex
from "vuex";
Vue
.use(Vuex
)
const store
= new Vuex.Store){
state
:{
count
:0
}
}
export defalut store
在 mian.js 内导入 store ,将 store 加入到整个 vue 的项目实例内。
store 的使用
组件内获取 store 数据
computed
: {
count
: this.$store
.state
.count
;
}
组件内修改 store 数据
需要在创建 store 的时候定义好修改的方法,也就是创建 mutation
const store
= new Vuex.Store({
...
mutations
:{
handleUpdate(state
){
state
.count
++
}
}
})
在组件内使用 store.commit('handleUpdate') 来修改 store 中的数据。
<template>
<div>
<h3>我是父组件 Parent1
</h3>
<p>展示 store 内共享的数据:{{ num }}{{num12}}
</p>
<button @click="handleUpdate1">点击减少数据
</button>
<button @click="handleUpdate">点击增加数据
</button>
<button @click="handleUpdate2">点击传给数据参数 123546
</button>
<button @click="handleUpdate3">显示{{num12}}
</button>
</div>
</template>
<script>
import store from "../store";
export default {
name: "Parent1",
created() {
console.log(this);
},
computed: {
num() {
return this.$store.state.num;
},
num12(){
return this.$store.state.num1
}
},
methods: {
handleUpdate() {
store.commit("StateUpdate");
},
handleUpdate1() {
store.commit("StateUpdate1");
},
handleUpdate2() {
store.commit("StateUpdate2", 123456);
},
handleUpdate3() {
store.commit({
type:'StateUpdate3',
num1:'我是 num1',
});
},
},
};
</script>
<style></style>
import Vuex
from "vuex";
import Vue
from "vue";
Vue
.use(Vuex
);
const store
= new Vuex.Store({
state
: {
num
: 1000,
num1
:'我是空值'
},
mutations
: {
StateUpdate(state
) {
state
.num
++;
},
StateUpdate1(state
) {
state
.num
--;
},
StateUpdate2(state
, payload
) {
state
.num
= payload
;
},
StateUpdate3(state
, payload
) {
console
.log(payload
);
state
.num1
= payload
.num1
;
},
},
});
export default store
;
