简单聊一聊Vuex的原理

最新推荐文章于 2023-05-23 10:14:35 发布

weixin_34122604

最新推荐文章于 2023-05-23 10:14:35 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b9b9c4f6fb9a05ce5768d45

本文深入解析Vue.js中状态管理的重要性及Vuex的工作原理，通过一个计算器示例，展示了如何利用Vuex进行数据状态的集中式管理和响应式更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习Vue最权威的毫无疑问是它的官方文档

Vue点击：cn.vuejs.org/v2/guide/in…

Vuex链接：vuex.vuejs.org/zh/guide/

面对一些Vue的初学者，如何进行组件之间的数据传递是一个较为难理解的部分，刚开始接触，可能在交互的过程中会将自己绕迷，那么针对一些问题Vue有自己的一套技术栈，其中Vuex就是Vue的状态管理模式。

Vuex：可以理解为Vue的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

状态管理很好理解，可以简单的认为管理数据或者参数的的变化。在官方文档上面也说明了Vuex和单纯的全局对象有一下不同：

1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

那么我们可以用张图来形象的解析在Vue中的状态变化

state，驱动应用的数据源。
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。

简单的来理解一下：state中放入初始数据，然乎通过action来改变state状态，view需要从state中拿数据，将其渲染到界面中，如果通过界面修改了数据，那么它是通过action去改变的state中的数据状态，然后view在state中再次取一次数据，也就是说它是一个单向数据流，下面它的任何的数据传输都离不开这个图。

我们用一个计算器的例子来进一步了解一下。

先使用Vue创建一个项目，将这里需要的包都装好，如何创建Vue项目这里就不详细说了，不熟悉的可以点击这里了解一下：www.cnblogs.com/chengdabeli…

1、创建状态管理仓库---store，并且放入全局中

//导入
import Vuex from 'vuex'
import Vue from 'vue'
//实例化
const store  = new  Vuex.Store({
  //设置数据初始状态
  state:{
    count : 0,
    price: 30
  },
 })
复制代码

2、在组件中渲染数据,同时添加了操作事件

<div>
    <button @click="reduce">-</button>
    <strong>{{$store.state.count}}</strong>
    <button @click="add">+</button>
    <button @click="hendlebro">兄弟组件传值</button>
  </div>
</template>

<script>
    export default {
      methods:{
        reduce(){
          this.$store.commit('REDUCE_COUNT')
        },
        add(){
          this.$store.commit('ADD_COUNT')
        },
        hendlebro(){
          this.$bus.$emit('toData',this.msg)
        },
      },
        name: "comB"
    }
</script>

<style scoped>

</style>
复制代码

3、action提交事件，修改状态，view获取新的数据。

  //同步提交事件
  mutations:{
    "ADD_COUNT"(state){
      state.count++
    },
    "REDUCE_COUNT"(state){
      state.count--
    },
    "CHANGE_COUNT"(state,payload){
      state.count = payload;
    }
  },
复制代码