【Vuex 的 详细讲解 】与【count++的案例实现】

看vuex官网持续懵逼状，案例看不懂且无法实现？？？连个count++都不会整？？？
看过来 看过来，案例实战更好地理解vuex
所有案例的实现均在脚手架上，vue cli搭建博客vue cli的安装升级与创建

学习资源：

• vuex
• 慕课vuex入门

一 、Vuex 简介

专为 Vue.js 应用程序开发的 状态管理模式。采用集中式存储管理应用的所有组件的状态

1-1 应用场景

1. 多个试图依赖于同一状态
2. 来自不同试图的行为需要改变同一个状态

1-2 vuex 的组成介绍

1. state ---- 数据仓库
   • state是比较强大的json，用来存储数据
2. getter — 用来获取数据的
   • 相当于vue的computed
   • 派生出一个新的computed
3. mutation ---- 用来修改数据的
   • 为什么不能直接实例化state，然后直接修改state的数据
   • 通过commit一个mutation，然后通过mutation传入state再对state进行修改
   • 同步的
   • 就是一个function
4. action ---- 用来提交mutation
   • 异步编程提交mutation，mutation来同步修改state

1-3 安装vuex

1. 安装vuex包： npm install vuex
2. 创建vuex实例： new Vuex.store()
3. main.js中将vuex实例挂载到vue对象上

1-4 实现count++的 小demo

1.、基本demo

• state中创建count字段
• mutations中创建一个count++ 的mutation
• button新增click事件触发mutation改变count

二、 count++案例的实现

1、 App.vue中：

<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> -->
      <h2>count: {{ count }}</h2>
      <button @click="increment1">点我自增</button>
    </div>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: "app",
  computed: {
    count() {
       return this.$store.state.count;
    }
  },
  methods: {
    increment1() {
      const v = 100;
      this.$store.commit("increment", v);
    }
  }
}
</script>

创建脚手架时 选择了 vuex

• 自动生成store文件夹下的index.js

若创建脚手架时未选择 vuex，在main.js中引入vuex，创建相应的vuex实例即可。如视频教程所示

2、 store文件夹下的index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state, v) {
            state.count += v;
        }
    },
    actions: {},
    modules: {}
})

3、展示