vuex的安装和使用

1.Vuex 是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
2.什么是“状态管理模式”？
状态自管理应用包含以下几个部分：
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
如图为“单向数据流”理念的简单示意：

vuex的应用场景 如下:
(1)涉及到非父子关系的组件, 列如: 兄弟关系, 祖孙关系, 设置更远的关系;
(2)他们之间 如果有数据交互, 那么应该 使用vuex来实现;
(3)如果页面之间复杂度较低, 也可以考虑 使用 global-event-bus 进行单向传递
(4)如果是父子关系的组件数据交互, 那么应该 考虑使用props进行单向传递;
(5)如果涉及到子组件 向父组件 数据传递, 那么考虑使用$emit 和 $on
3.使用
安装

npm install vuex --save

例子,简单的 Vue 计数
在src新建store.js

//   入口文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.config.productionTip = false
Vue.use(Vuex);

const state = {
    count: 1
}

// 用来监听state数据的更新
const mutations = {
    increment(state) {
        state.count++
    },
    decrement(state) {
        state.count--
    }
}

const actions = {
    increment: ({ commit }) => {
        commit('increment')
    },
    decrement: ({ commit }) => {
        commit('decrement')
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions
})

Vuex 主要有四部分：
1.state：包含了store中存储的各个状态。
2.getter: 类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。
3.mutation: 一组方法，是改变store中状态的执行者，只能是同步操作。
4.action: 一组方法，其中可以包含异步操作。
main.js 文件夹

import Vue from 'vue'
import App from './App.vue'

import store from './store'
Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    store
}).$mount('#app')

新建子组件shuju.vue

<template>
  <div class="hello">
    {{$store.state.count}}
      <button type="button" @click='increment'>增加</button>
      <button type="button" @click="decrement">删减</button>
   
  </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
  // mapActions  分发  方法===>store 中的  actions
  methods:mapActions([
    'increment',
    'decrement'
  ])
}
</script>

App.vue

<template>
  <div id="app">
    <vuejs />
  </div>
</template>

<script>
import vuejs from './components/vuejs'

export default {
  components: {
    vuejs
  }
}
</script>