Vue学习之vuex

1.什么是vuex

vuex是vue中集中式管理状态（数据）的插件，对vue应用中多个组件的功享状态（数据）进行集中管理（读/写），也是组件通信的一种方式，用于任意组件间通信。

2.vuex的原理

vuex由3部分组成分别是Actions、Mutations、State组成。

当组件要操作某个数据时，调用dispatch向Actions发送动作类型以及操作值（比如给某个数加1） ，

Actions拿到后再进行一些业务逻辑操作或者向服务器请求数据等（这个环节可以跳过），然后调用commit向Mutations发送动作类型以及操作值。Mutations再更新state中的数据

3.搭建vuex环境

现在最新版是vuex4，vue3的小伙伴可以用，但vue2的只能vuex3及以下版本。

1.npm i vuex@3

2.创建store/index.js文件

//引入vuex
import vue from "vue"
import Vuex from "vuex"

//准备Actions
const actions={


}


//准备Mutations

const mutations={

}


//准备States
const states={}

//创建store简写形式

//使用vuex

vue.use(vuex)
const store=new Vuex.Store({
actions,
mutations,
states

})

//导出文件
export default store

3.挂在实例对象上

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

4.案例

1.配置使用vuex

//引入vuex
import vue from "vue"
import Vuex from "vuex"

//准备Actions

const actions={
//定义add事件
add:function(a,value){
a.commit("add",value)

}

//准备Mutations

const mutations={

//定义add事件
add(state,value){
state.num++
}

}


//准备States

const states={
num:0
}

//创建store简写形式

//使用vuex

vue.use(vuex)
const store=new Vuex.Store({
actions,
mutations,
states

})

//导出文件
export default store

在A组件读取num值

<template>
  <h1>{{ $store.num }}</h1>
  
</template>

<script>
export default {
  name: 'A',
  props: {
    msg: String
  },
  data() {
    return {
     
    }
  }
}
</script>

在B组件给num加1
 

<template>
  
  <button @click="count">count is: {{ $store.num }}</button>

</template>

<script>
export default {
  name: 'B',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  }
methods:{
count(){
//add是事件名，actions或者mutation中要提前定义
this.$store.dispatch("add",1)
}
}

}
</script>

总结

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

vue3官方推荐使用Pinia,现有用户可能对 Vuex 更熟悉，它是 Vue 之前的官方状态管理库。由于 Pinia 在生态系统中能够承担相同的职责且能做得更好，因此 Vuex 现在处于维护模式。它仍然可以工作，但不再接受新的功能。对于新的应用，建议使用 Pinia。相比于 Vuex，Pinia 提供了更简洁直接的 API，并提供了组合式风格的 API，最重要的是，在使用 TypeScript 时它提供了更完善的类型推导。

感谢观看，如有不足请多包涵。