vuex

https://vuex.vuejs.org/zh/

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。如果您的应用够简单，最好不要使用Vuex。

使用Vuex管理数据优势：

• 能够在vuex中集中管理共享的数据，便于开发和后期进行维护
• 能够高效的实现组件之间的数据共享，提高开发效率
• 存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

4.2、vuex核心概念

vuex对象中通过state来存储状态，除了state以外还有用来操作state中数据的方法集，以及当我们需要对state中的数据需要加工的方法集等等成员。

成员列表：

• state 存放状态  => mongodb/mysql
• mutations state成员操作  model=》操作 增删改  同步操作
• getters 加工state成员给外界 =》 查
• actions 异步操作     =》 操作 增删改   ajax
• modules 模块化状态管理

vuex工作流程

首先，Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时，需要dispatch VueX中actions的方法，以保证数据的同步。可以说，action的存在就是为了让mutations中的方法能在异步操作中起作用。

如果没有异步操作，那么我们就可以直接在组件内提交状态中的Mutations中自己编写的方法来达成对state成员的操作。不建议在组件中直接对state中的成员进行操作，这是因为直接修改(例如：this.$store.state.name = 'hello')的话不能被VueDevtools所监控到。最后被修改后的state成员会被渲染到组件的原位置当中去。

使用vuex到项目

如果你在vue-cli创建项目时没有勾选vuex选项，则需要手动安装

cnpm i -S vuex

使用

在src目录下面创建一个store目录

创建统一数据状态管理 在store里面创建index.js文件

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

import {INCR_COUNT}from './constant'

export default new Vuex.Store({

  // 统一状态数据源 可以是所有的vue组件中的数据都可以存储在这里，当前此处只是一个临时，刷新就没有了

  // 数据源

  state:{

    count:100

  },

  // 类似于计算属性

  getters:{

    getCount(state){

      return state.count + '万(W)'

    }

  },

  // 同步处理的方法，它会直接操作state数据源

  mutations:{

    // 此处的名称要和commit参数1的名称要一致

    // 如果是一个变量，要想转为字符串，需要使用[]括起来就行了

    [INCR_COUNT](state,payload){

      state.count += payload

    }

  }

})

在src/main.js中的对于new Vue实例与vuex状态进行关联

在store文件夹新建constant.js文件 在index中已经引入的文件

// 资产增长量
export const INCR_COUNT = 'incr2'

在组件中写入

<template>
  <div>
    <div>我的存款：{{ $store.getters.count }}</div>
    <hr>
    <Child></Child>
  </div>
</template>

<script>
import Child from './Child'
export default {
  components:{
    Child
  },
  data() {
    return {};
  },
  mounted() {
    
  },
};
</script>

在Child子组件

<template>
  <div>
    我是子组件：{{$store.getters.getCount}}
    <br>
    {{getCount}}
    <br>
    state:{{count}}
    <br>
    <button @click="incr">财产增加</button>
  </div>
</template>

<script>
import {INCR_COUNT}from '../../store/constant'
// 写在计算属性中
import {mapGetters,mapState} from 'vuex'

export default {
  data() {
    return {}
  },
  computed:{
    // 开始是这样写的
    /*
    ...mapGetters({
      getCount:"getCount"
    })
    可以简化成下面这个样子
    */
   ...mapGetters(['getCount']),
   ...mapState(['count'])
  },
  methods:{
    incr(){
      // 可以直接修改
      // this.$store.state.count = 200
      // 发送同步的命令，让全局状态修改
      // 参数1 命令名称
      // 参数2 命令传的参数，可选
      // this.$store.commit('ince')
      this.$store.commit(INCR_COUNT,100)
    }
  }
}

</script>

这样你在一个组件点财产增加另一个也会变