Vuex基础入门

Vuex基础入门

一、Vuex概述

vuex官网地址

1.1组件之间共享数据的方式

父向子传值： v-bind属性绑定
子向父传值： v-on 事件绑定
兄弟组件之间共享数据: EventBus

• $on :接受数据的那个组件
• $emit:发送数据的那个组件

1.2 Vuex是什么？

Vuex是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间数据的共享。

1.3 使用Vuex统一管理状态的好处？

1. 能够在Vuex中集中管理共享的数据，易于开发和后期维护
2. 能够高效地实现组件之间的数据共享，提高开发效率
3. 存储在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步

1.4 什么样的数据适合存储在Vuex中？

一般情况下，只有组件之间共享的数据，才有必要存储到Vuex中，对于组件中的私有数据，依旧存储在组件自身的data中即可。

二、Vuex的基本使用

2.1 安装Vuex依赖包？

npm install vuex --save

2.2 导入Vuex包？

import Vuex from 'vuex'
Vue.use(Vuex)

2.3 创建store对象？

const store=new Vuex.Store({
  //state 中存放的及就是全局共享的数据
  state:{count:0},
  mutations:{}.
  actions:{}
})

2.4 将store对象挂载到vue实例中

new Vue({
	el:'#app',
	render:h=>h(app),
	router,
	//将创建的共享数据对象，挂载到Vue实例中
	//所有的组件，就可以从store中获取全局的数据了
	store
})

三、Vuex的核心概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

3.1 Vuex中的主要核心概念如下：

• State
• Mutation
• Action
• Getter

3.2 State：

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。

//创建store数据源，提供唯一公共数据
const store=new Vuex.Store({
  state:{count:0}
})

组件访问State中数据的第一种方式：

this.$store.state.全局数据名称

---

组件访问State中数据的第二种方式：

//1.从Vuex中按需导入mapState函数
import {mapState} from 'Vuex'

.可以通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：

//2.将全局数据，映射为当前组件的计算属性
computed:{
	...mapState(['count'])
}

3.3 Mutation：

Mutation用于变更Store中的数据

1. 只能通过Mutation变更Store数据，不可以直接操作Store中的数据。
2. 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
   this.$state.commit()是触发mutation的第一种方式
   定义Mutation

//定义Mutation
const store=new Vuex.store({
  state:{
    count:0
  },
  mutations:{
    add(state){
      //变更状态
      state.count++
    }
  }
})

触发Mutation

// 触发mutation
methods:{
  handle(){
    //触发mutation的第一种方式
    this.$Store.commit('add')
  }
}

---

可以在触发mutation时传递参数

//定义Mutation
const store =new Vuex.store({
  state:{
    count:0
  },
  mutations:{
    addN(state,step){
      //变更状态
      state.count+=step
    }
  }
})

触发Mutation

methods:{
  handle2(){
    //在你调用commit函数,commit的作用就是调用某个mutation函数
    //触发mutations时携带参数
    this.$store.commit('addN',3)
  }
}

---

触发mutation的第二种方式
1.从vuex中导入mapMutations函数

//1. 从vuex中导入mapMutations函数
import {mapMutations} from 'vuex'

2.通过刚擦导入的mapMutations函数，将需要的mutation函数，映射为组价methods方法：

//2.将指定的mutation函数，映射为当前组件的methods函数
methods:{
  ...mapMutations['add','addN'],
  btmHandler1(){
    this.add()
  }
   btmHandler2(){
    this.addN(3)
  }
}

3.4 Action：

Action用于处理异步任务。
如果遇到异步操作变更数据，必须通过Action，而不能使用Mutation，但是Action中还是要通过触发Mutation的时间变更数据
this.$state.dispath()是触发action的第一种方式
触发action异步任务时携带参数：
定义Action

//定义Action
const Store=new Vuex.store({
  //...省略其他代码
  mutations:{
    addN(state,step){
      state.count+=step
    }
  },
  actions:{
    addNAsync(countext,step){
      setTmeout(()=>{
        //在actiion中，不能直接修改state中的数据
        //必须通过context.commit()触发这个mutation才行
        context.commit('addN',step)
      },1000)
    }
  }

})

触发Action

methods:{
  handle(){
    //在调用dispath函数，专门用来触发action
    //触发actions时携带参数
    this.$store.dispatch('addNAsync',5)
  }
}

触发action的第二种方式
1.从vuex中按需导入mapActions函数

//1.从vuex中按需导入mapActions函数
import {mapActions} from 'vuex'

2.通过刚才导入的mapActions函数，将需要的actiion函数，映射为当前组件methods方法：

//2.通过刚才导入的mapActions函数，将需要的actiion函数，映射为当前组件methods方法
methods:{
  ...mapActions(['addNAsync']),
  btmHandler3(){
    this.addNAsync()
  }
}

3.5 Getter：

Getter用于度Store中的数据进行加工处理形成新的数据。不会修改原始数据，起到一个包装数据的作用

1. Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
2. Store中数据发生变化，Getter的数据也会跟着变化。

定义Getter

//定义Getter
const store=new Vuex.store({
  state:{
    count:0
  },
  getters:{
   showNum:state=>{
      return '当前最新的数量是'+state.count+1
    },
    showNum1(state){
      return '当前最新的数量是'+state.count+1
    }
  }
})

使用getters的第一种方式：

<h3>{{$store.getters.showNum1}}</h3>

this.$store.getters.名称

使用getters的第二种方式：

<h3>{{showNum1}}</h3>

import {mapGetters} from 'vuex'
computed:{
  ...mapGetters(['showNum1'])
}

---

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。