风云阁资源网

Vuex入门到上手教程
网络编程 2024/11/18 佚名
3 1

一、前言

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

Vuex入门到上手教程 

二、什么是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

脚手架安装好后，再安装vuex

cnpm install vuex --save

 五、如何使用Vuex

1.如何通过Vuex来实现如下效果？

Vuex入门到上手教程 

①创建一个store.js文件

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

②在main.js文件中引入store.js文件

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

③新建一个模板count.vue

<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>

由于 store 中的状态是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。改变store 中的状态的唯一途径就是显式地提交 (commit) mutations。

这样，我们就可以实现自增1或是自减1，那假如我们想要点击一次实现自增2，这该如何实现，也就是如何向Mutations传值？

2.如何在Mutations里传递参数

先store.js文件里给add方法加上一个参数n

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

然后在Count.vue里修改按钮的commit( )方法传递的参数

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

3.getters如何实现计算过滤操作

getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。

例如：要对store.js文件中的count进行操作，在它输出前，给它加上100。

首先要在store.js里Vuex.Store()里引入getters

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

然后在Count.vue中对computed进行配置，在vue 的构造器里边只能有一个computed属性，如果你写多个，只有最后一个computed属性可用，所以要用展开运算符”…”对上节写的computed属性进行一个改造。

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

需要注意的是，此时如果点击'+'，就会增加102，如果点击'-',就会增加99，最后的结果是mutations和getters共同作用的。

4.actions如何实现异步修改状态

actions和上面的Mutations功能基本一样，不同点是， actions是异步的改变state状态，而Mutations是同步改变状态 。

①在store.js中声明actions

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

actions是可以调用Mutations里的方法的,调用add和reduce两个方法。在addAction里使用setTimeOut进行延迟执行。在actions里写了两个方法addAction和reduceAction，两个方法传递的参数也不一样。

context：上下文对象，这里你可以理解称store本身。 {commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了

②模板中的使用

<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'])
}

最后得到如下效果：点击addAction按钮事件时，先累加2，两秒后再减去1，而addNumber事件则不能实现异步效果。

Vuex入门到上手教程

ps:如果想访问源代码，请猛戳 git地址 。如果觉得对您有用，请给本文的github加个star,万分感谢

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

风云阁资源网 Design By www.bgabc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
风云阁资源网 Design By www.bgabc.com
www.bgabc.com 风云阁资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
风云阁资源网 Design By www.bgabc.com