VueJs(14)---理解Vuex

Posted 2020-11-04 雨点的名字

理解Vuex

 

一、Vuex 是什么？

      首先我们来分析一种实际开发中用vue.js的场景，你有n个组件，当你改变一个组件数据的时候需要同时改变其它n个组件的数据，那么我想你可能会对 vue 组件之间的通信感到崩溃 。

  这个时候vuex作用就来了，它可以集中管理所有组件共享的数据，做到改一个而是全部组件进行同步更新。什么意思呢？

    下面用案例说明：

1. 单纯依赖于vue.js

2. 依赖vue.js，也使用了vuex技术

   目的是通过对比引出vuex的概念、优势和劣势。现在开始。

 假设一个微小的应用，有一个标签显示数字，两个按钮分别做数字的加一和减一的操作。用户界面看起来是这样的：

1、纯vue.js代码：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <p>{{count}}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </p>
</div>
<script>
new Vue({
  el:\'#app\',
  data () {
    return {
      count: 0
    }
  },
  methods: {
    inc () {
      this.count++
    },
    dec () {
      this.count--
    }
  }
})
</script>

 

整个代码结构非常清晰，代码是代码，数据是数据。代码就是放在methods数组内的两个函数inc、dec，被指令@click关联到button上。而data内返回一个属性count，此属性通过{{count}}绑定到标签p内。

2、依赖vue.js，也使用了vuex技术

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
    <p>{{count}}
        <button @click="inc">+</button>
        <button @click="dec">-</button>
    </p>
</div>
<script>
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            inc: state => state.count++,
            dec: state => state.count--
        }
    })

    const app = new Vue({
        el: \'#app\',
        computed: {
            count() {
                return store.state.count
            }
        },
        methods: {
            inc() {
                store.commit(\'inc\')
            },
            dec() {
                store.commit(\'dec\')
            }
        }
    })
</script>

这两个的区别在呢?

 1、methods数组还是这两个方法，这和demo1是一样的；但是方法内的计算逻辑，不再是在函数内进行，而是提交给store对象！这是一个新的对象！

  2、count数据也不再是一个data函数返回的对象的属性；而是通过计算字段来返回，并且在计算字段内的代码也不是自己算的，而是转发给store对象。再一次store对象！

就是说vuex把组件中的数据和改变数据的方法给抽离出来，进行全局管理，这个时候你改变组件某一数据的时候，改变的全局的数据，那么对于其它通过store.state.count

得到的count数据当然会一起改变咯。

Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式。这个状态自管理应用包含以下几个部分：

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

 

二、Store

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

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

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)

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

 现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：

store.commit(\'increment\')

console.log(store.state.count) // -> 1

 

参考：

链接：到底vuex是什么？

 

想太多，做太少，中间的落差就是烦恼。想没有烦恼，要么别想，要么多做。上尉【3】