vuex理解

1、什么是vuex？

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

2、使用vuex的核心概念

1. store

vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。
（1）创建store

const store = new Vuex.Store({
   ...});

可见，store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象：

• state – 存放状态
• getters – state的计算属性
• mutations – 更改状态的逻辑，同步操作
• actions – 提交mutation，异步操作
• mudules – 将store模块化

关于store，需要先记住两点：

• store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；
• 不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使
  得我们可以方便地跟踪每一个状态的变化。

（2）完整的store的结构

const store = new Vuex.Store({
    state: {
   
       // 存放状态 
 },
  getters: {
   
       // state的计算属性 
  },
  mutations: {
   
       // 更改state中状态的逻辑，同步操作 
  },
  actions: {
    
      // 提交mutation，异步操作 
  },
// 如果将store分成一个个的模块的话，则需要用到modules。 
//然后在每一个module中写state, getters,   mutations, actions等。 
modules: {
   
  a: moduleA, 
  b: moduleB, 
  // ... 
}

2. state

state上存放的，说的简单一些就是变量，也就是所谓的状态。没有使用 state 的时候，我们都是直接在
data 中进行初始化的，但是有了 state 之后，我们就把 data 上的数据转移到 state 上去了。另外有些状
态是组件私有的状态，称为组件的局部状态，我们不需要把这部分状态放在store中去。
（1）如何在组件中获取vuex状态
由于vuex的状态是响应式的，所以从store中读取状态的的方法是在组件的计算属性中返回某个状态。

import store from 'store'; 
const Counter = {
    
  template: `<div>{
    { count }}</div>`, 
  computed: {
    
  count () {
   
    // 获取store中的状态 return 
       store.state.count; 
     } 
   } 
 }
 

这样，组件中的状态就与store中的状态关联起来了。每当store.state.count发生变化时，都会重新求取计算属性，从而更新DOM。
然而，每个组件中都需要反复倒入store。可以将store注入到vue实例对象中去，这样每一个子组件中都
可以直接获取store中的状态，而不需要反复的倒入store了。

const app = new Vue({
   
 el: '#app', 
 // 把 store 对象注入到了 store, 
 components: {
    Counter },
  template: 
  ` <div>
        <counter></counter>
   </div> ` 
   }