Vuex 五个核心【State，Getter，Mutation，Action，Module】

Vue是什么?

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

• vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。

大家都知道兄弟组件之间的传值是用到事件EventBus来进行的，当然也可以通过父组件作为桥梁进行传值，那么遇到祖孙组件时传值就会比较麻烦，所以eventbus只是小型项目考虑的，当项目大起来的时候，就考虑使用vuex（因为是官方的亲儿子- - ）

 

这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；

• view，以声明方式将 state 映射到视图；

• actions，响应在 view 上的用户输入导致的状态变化。

 以下是一个表示"单向数据流"理念的简单示意图

 

初始化项目:

npm i vuex --save -- 安装到运行时依赖 开发时依赖 就是开开发的时候，需要的依赖，运行时依赖，项目上线运行时依然需要的

 

vuex基础-state:

state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象

中定义state

store/index.vue

import Vue from 'vue'
// 1.引入库
import Vuex from 'vuex'
// 2.注册（其实是执行了Vuex内的install方法
//vuex: 全局状态共享   state:状态
// 全局: 所有组件都能共享使用 state 中的值
Vue.use(Vuex)
export default new Vuex.Store({
// 3.书写在 state 中的变量, 就可以全局共享, 在所有组件中都可以使用
  state: {
    //管理数据
    count:0,
    name:'zs'
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

这个.vue文件放view文件夹或者components文件夹那都可以 ,自己创一个文件  

<template>
  <div>
      <!-- 怎么在组件中获取count 和 name？ -->
      <!-- 这是原始的插值语法 -->
      <div>{
  {$store.state.count}}</div>
      <div>{
  {$store.state.name}}</div>

      <!-- 这是语法糖写法  这种写法比较多人喜欢  它有三个步骤 -->
      <!-- 3.使用接收 -->
      <div>{
  {count}}</div>
      <div>{
  {name}}</div>
  </div>
</template>
<script>
// 1.引入mapState
import { mapState } from 'vuex'
  export default {
    computed:{
      // 语法糖写法  mapState是辅助函数 帮助我们把store中的数据映射到 组件的计算属性中
      // 2.采用数组形式引入state属性,并用扩展运算符将导出的状态映射给计算属性
      ...mapState(["count","name"])
     
    }
    
  }
</script>
<style lang="scss" scoped>
</style>