Vuex入门到上手教程

原创 黎云锐 教程 前端 3514阅读 29 天前 举报

这篇文章主要介绍了Vuex入门到上手教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一、前言

当我们的应用遇到多个组件共享状态时,会需要多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。在搭建下面页面时,你可能会对 vue 组件之间的通信感到崩溃 ,特别是非父子组件之间通信。此时就应该使用vuex,轻松可以搞定组件间通信问题。

image
二、什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。这里的关键在于集中式存储管理。 这意味着本来需要共享状态的更新是需要组件之间通讯的,而现在有了vuex,就组件就都和store通讯了 。

三、什么时候使用Vuex

虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如果您的应用够简单,您最好不要使用 Vuex,因为使用 Vuex 可能是繁琐冗余的。一个简单的global event bus就足够您所需了。但是, 如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

四、Vuex安装(限定开发环境为 vue-cli)

首先要安装vue-cli脚手架,对于大陆用户,建议将npm的注册表源设置为国内的镜像(淘宝镜像),可以大幅提升安装速度。

npm config set registry https:``//``[registry.npm.taobao.org](http:``//registry``.npm.taobao.org/)
npm config get registry``//``配置后可通过下面方式来验证是否成功
npm install -g cnpm --registry=[https:``//registry``](https:``//registry/``).npm.taobao.org
//cnpm``安装脚手架
cnpm install -g vue-cli
vue init webpack my-vue
cd my-vue
cnpm install
cnpm run dev

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
state: { //这里的state必须是JSON,是一个对象
count: 1 //这是初始值
},
mutations: {``//突变,罗列所有可能改变state的方法
ad(state) {
state.count++; //直接改变了state中的值,而并不是返回了一个新的state
},
reduce(state){
state.count--;
}
}
});
export default store;``//用export default 封装代码,让外部可以引用

import store from "./vuex/store"
new Vue({
router,
store,
el: '#app'``,
render: h => h(App)
})

<``template``>
<``div``>
<``h2``>{{msg}}</``h2``><``hr``/>
<``h2``>{{$store.state.count}}-{{count}}</``h2``>//这两种写法都可以
<``button @``click``=``"addNumber"``>+</``button``>
<``button @``click``=``"reduceNumber"``>-</``button``>
</``div``>
</``template``>
<``script``>
import {mapState} from 'vuex'
export default {
data() {
return {
msg: "Hello Vuex"
};
},
methods: {
addNumber() {
return this.$store.commit("add");
},
reduceNumber() {
return this.$store.commit("reduce");
}
},
computed: mapState(['count'])// 映射 this.count 到 this.$store.state.count
mapState 函数可以接受一个对象,也可以接收一个数组
};
</``script``>

mutations: {
add(state,n) {
state.count+=n;
},
reduce(state){
state.count--;
}
}

addNumber() {
return this``.$store.commit(``"add"``,2);
},
reduceNumber() {
return this``.$store.commit(``"reduce"``);
}

getters:{
count:state=>state.count+=100
}

computed: {
...mapState([``"count"``]),
count() {
return this``.$store.getters.count;
}
}

actions: {
addAction(context) {
context.commit(``'add'``, 2);``//一开始执行add,并传递参数2
setTimeout(() => {
context.commit(``'reduce'``)
}, 2000);``//两秒后会执行reduce
console.log(``'我比reduce提前执行'``);
},
reduceAction({
commit
}) {
commit(``'reduce'``)
}
}

<``p``>
<``button @``click``=``"addNumber"``>+</``button``>
<``button @``click``=``"reduceNumber"``>-</``button``>
</``p``>
<``p``>
<``button @``click``=``"addAction"``>+</``button``>//新增
<``button @``click``=``"reduceAction"``>-</``button``>//新增
</``p``>

import { mapState, mapGetters, mapActions } from "vuex"``;
methods:{
...mapMutations([

'add'``,``'reduce'
]),
...mapActions([``'addAction'``,``'reduceAction'``])
}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复