做非洲国际贸易网站,wordpress全站采集,沈阳视频制作公司,安徽省公路建设行业协会网站Vuex简介
Vuex概述
Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规
则保证状态以一种可预测的方式发生变化.
试想这样的场景, 比如一个Vue的根实例下面有一个根组件名为App.vue, 它下面有两个子组件A.vue和B.vu…Vuex简介
Vuex概述
Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规
则保证状态以一种可预测的方式发生变化.
试想这样的场景, 比如一个Vue的根实例下面有一个根组件名为App.vue, 它下面有两个子组件A.vue和B.vue,
App.vue想要与A.vue或者B.vue通讯可以通过props传值的方式, 但是如果A.vue和B.vue之间的通讯就很麻烦了, 他
们需要共有的父组件通过自定义事件进行实现, A组件想要和B组件通讯往往是这样的 A组件说: 报告老大, 能否帮我托个信给小弟B dispatch一个事件给App App老大说: 包在我身上, 它需要监听A组件的dispatch的事件, 同时需要broadcast一个事件给B组件 B小弟说: 信息已收到, 它需要on监听App组件分发的事件
这只是一条通讯路径, 如果父组件下有多个子组件, 子组件之间通讯的路径就会变的很繁琐, 父组件需要监听大量的
事件, 还需要负责分发给不同的子组件, 很显然这并不是我们想要的组件化的开发体验。
Vuex就是为了解决这一问题出现的它相当于提供了一个共享数据存储区域。
如何在Vue-cli中引入Vuex
在创建Vue-cli工程时选择添加Vuex模块就可以在工程中引入Vuex模块了。 在src文件夹中会出现一个store文件夹此文件夹中有一个index.js文件这就是Vuex模块的js文件。
import { createStore } from vuex
// Vuex 数据管理框架
export default createStore({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
在main.js文件中就会自动添加导入store模块和加载store模块的代码
import { createApp } from vue
import App from ./App.vue
import router from ./router
import store from ./store
createApp(App).use(store).use(router).mount(#app)
Vuex的使用
Vuex中有五个默认的基本对象
state: state就是Vuex中的公共的状态, 可以将state看作是全局唯一的共享数据仓库。
类似Vue中的data。state是所以组件共享的data是某个组件独有的。
getters: state 的计算属性类似Vue中的computed 计算属性。
mutations声明方法用于修改state。类似Vue中的mothods方法。只能修改同步数据。
actions声明方法用于修改state。类似Vue中的mothods方法。可以修改异步数据。比如调用api接
口都在这里完成。
modulesstore的子模块只在开发大型项目的时候会用的上。
思考state用于存储共享数据是非常容易理解的。但是getters、mutations、actions等是做什么用的有 什么必要吗
state的使用
1.在store文件夹下的index.js文件中写入如下代码
import { createStore } from vuex
export default createStore({
state: {
num: 10
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
2.在两个组件中都添加如下代码
template
div
div这是Home {{$store.state.num}}/div
/div
/template
script
export default {
created(){
console.log(this.$store.state.num);
}
}
/script
两个组件中都会获取state中的数据
我们也可以对state数据进行修改。
template
div
div这是Home {{$store.state.num}}/div
button clickchangechange/button
/div
/template
script
export default {
created(){
console.log(this.$store.state.num);
},
methods:{
change(){
this.$store.state.num 20;
}
}
}
/script
上面代码有什么问题吗
在HomeView.vue文件中我们通过一个方法修改了state数据。此时我们会发现其他组件中的state数据也
随之改变了。
这是必然的因为state本来就是所有组件的共享数据。此时问题就出来了。
如果共享数据可以被任何一个组件随意修改的话此数据将变得非常不安全。
现在我们知道了为了保证state共享数据的安全Vuex不希望在某个组件中随意的修改数据而是希望对共享数
据的修改都集中在Vuex中这样才能监控共享数据的修改保证它的安全。
getters、mutations、actions这些对象的作用就在于此。
getters的使用
1.在store文件夹下的index.js文件中写入如下代码
import { createStore } from vuex
export default createStore({
state: {
num: 10
},
getters: {
newnum(state){
return state.num 10;
}
},
...
})
2.在组件中添加如下代码
...
h1{{$store.getters.newnum}}/h1
...
组件中就会获取getters中的数据。
mutations的使用
1.在store文件夹下的index.js文件中写入如下代码
import { createStore } from vuex
export default createStore({
state: {
num: 10
},
getters: {
newnum(state){
return state.num 10;
}
},
mutations: {
addMethod(state,param){
state.num param;
}
},
actions: {
},
modules: {
}
})
2.在组件中添加如下代码
template
div
div这是Home {{$store.state.num}}/div
button clickchangechange/button
/div
/template
script
export default {
methods:{
change(){
this.$store.commit(addMethod,6);
}
}
}
/script
想要访问Vuex中mutations中的方法需要使用commit方法。此方法有两个参数。
第一个参数要执行mutations中的方法名。
第二个参数给执行mutations中的方法传递的参数。
注意必须要经过commit才能触发 mutation 。
actions的使用
1.在store文件夹下的index.js文件中写入如下代码
import { createStore } from vuex
export default createStore({
state: {
num: 10
},
getters: {
newnum(state){
return state.num 10;
}
},
mutations: {
addMethod(state,param){
state.num param;
}
},
actions: {
addMethod(state,param){
//这里使用setTimeout模拟异步方法
setTimeout((){
state.commit(addMethod,param);
},3000);
}
},
modules: {
}
})
2.在组件中添加如下代码
template
div
div这是Home {{$store.state.num}}/div
button clickchangechange/button
/div
/template
script
export default {
methods:{
change(){
//this.$store.commit(addMethod,6);
this.$store.dispatch(addMethod,6);
}
}
}
/script
想要访问Vuex中mutations中的方法需要使用dispatch方法。此方法有两个参数。
第一个参数要执行actions中的方法名。
第二个参数给执行actions中的方法传递的参数。
总结
现在对Vuex中的state、getters、mutations、actions做一下总结 state存放全局共享数据。使用形式$store.state.num getters计算属性。使用形式$store.getters.newnum mutations处理同步数据的方法。使用形式$store.commit(addMethod,6); actions处理异步数据的方法。使用形式$store.dispatch(addMethod,6);
先使用 $store.dispatch(addMethod,6); 的方式调用Vuex中的actions。
actions再使用commit方法调用Vuex中的mutations
