vueX简介；

最新推荐文章于 2021-05-22 14:39:12 发布

weixin_44695402

最新推荐文章于 2021-05-22 14:39:12 发布

阅读量192

点赞数

分类专栏： vue.js基础

本文链接：https://blog.csdn.net/weixin_44695402/article/details/91350875

版权

vue.js基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是Vuex?

Vuex 是专为vue.js应用程序开发的状态管理模式。。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化;
这个状态管理模式包括以下几部分：
state，驱动应用数据源；
view,以生名的方式将state映射到试图；
actions,响应在view上的用户输入导致状态变化，
下面时一个表示“单向数据流”理解的简单示意：

在这里插入图片描述下面用一个字数器简单用下vuex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click=$store.commit('add')>按钮—{{$store.state.count}}</button>
        <!--在这里提交一个 commit 触发数据改变>
        <show></show>   
    </div>
    <script src="./lib/vue.js"></script>  //引入vue.js
    <script src="./lib/vuex.js"></script>  //引用vuex
    <script>
        console.log(Vuex)  //输出的vuex 是个对象
        Vue.use(Vuex)   //用之前先使用vuex
        const show={
            template:`<h1>当前值为{{$store.state.count}}</h1>`    //在这里定义了一个组件；
            //在html里使用$store.state.count  获取store里的count值
        }
        const store = new Vuex.Store({
            state:{  // 在这里储存数据，
                count:0, 
            },
            mutations:{
                add(state){   //在这里改变数据
                    state.count+=1
                }
            }
        })
        var app = new Vue({
            store, //相当于store：store   使用store属性把把Vuex中的数据绑定到vue实例
            el:'#app',
            components:{    //定义组件在这里注册
                show,
            }
        })
    
    </script>
</body>
</html>

但是我们遇见多个组件状态共享时单向数据流容易被破坏；
问题1：多个视图依赖同一状态，
问题2 ：来自不同视图的行为变更同一状态。
问题1 ，传参的方法对于多层嵌套的组件非常繁琐，并且对于兄弟
组件间的状态传递无能为力。
对于问题2我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。
因此：我们把组件的共享状态抽取出来，以一个全局单例的模式进行管理。在这种模式下，我们的组件库构成啦一个巨大的视图，不管树在哪个位置任何组件都能获取状态触发行为；
在这里插入图片描述

什么情况使用vuex;Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

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

Vuex的单一状态树state

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT )”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

那么我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性 中返回某个状态：

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

Vuex的Mutation

更改vuex的store中的状态为唯一的方式就是提交mutation。Vuex中的mutation非常类似于事件；每一个mutation都有一个字符串的事件类型，和一个回调函数，这个回调函数就是我们实际进行状态改变的地方，并且他会接受一个state做参为第一参数

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法

store.commit('increment')

Action

Action 类似于mutation，不同在于
1 Action 提交的mutation，而不是直接变更状态。
2 Action 可以包含任何状态的异步操作；

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action 函数接受一个store实例具有相同方法和属性的context对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。