vuex

　　Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

在src上新建一个store文件夹,在里面新建一个index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0,
    data: 5,
    todos: [
      {id: 1, text: 'hello', done: true},
      {id: 2, text: 'world', done: false},
      {id: 3, text: 'china', done: true},
      {id: 4, text: 'beijing', done: false}
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
})
export default store

然后在main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import store from './store' //引入这个文件夹
Vue.use(ElementUI)
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在组件中使用

<template lang="html">
  <div class="demo">
    <p>{{count}}</p>
    <el-button type="primary" @click="increment">+</el-button>
    <el-button @click="decrement">-</el-button>
    <p>{{$store.getters.doneTodos}}</p>
    <p>{{data}}</p>
  </div>
</template>

<script>
export default {
  name: 'demo',
  computed: {
    count () {
      return this.$store.state.count
    }
  }
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    }
  }
}
</script>

<style lang="css">
</style>

　　通过count计算属性获取同名state.count属性，是不是显得太重复了，我们可以使用mapState函数简化这个过程。

有两种方式:需要引入  import { mapState } from 'vuex'

1.

  computed: mapState([
    'count',
    'data'
  ]),

2.

  computed: mapState({
    data: state => state.data,
    countAlias: 'data'
  }),

Getters

如果我们需要对state对象进行做处理计算，

组件中书写:

　<template>
　　<p>
　　{{doneTodos}}
　　</p>
  </template>
  computed: {
    doneTodos () {
      return this.$store.state.todos.filter(todo => todo.done)
    }
  },

store/index.js 在state中书写

    todos: [
      {id: 1, text: 'hello', done: true},
      {id: 2, text: 'world', done: false},
      {id: 3, text: 'china', done: true},
      {id: 4, text: 'beijing', done: false}
    ]

最后效果只展示done为true的信息

　　如果多个组件都要进行这样的处理，那么就要在多个组件中复制该函数。这样是很没有效率的事情，当这个处理过程更改了，还有在多个组件中进行同样的更改，这就更加不易于维护。

　　Vuex中getters对象，可以方便我们在store中做集中的处理。

　　在store/index.js  在state下面书写

　　

getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  },

在组件的template中直接书写

<p>{{$store.getters.doneTodos}}</p>

 或者使用MapGetters

import { mapGetters } from 'vuex'
computed: mapGetters([
    'doneTodos',
    'doneTodosCount'
  ]),

Mutation

import {  mapMutations } from 'vuex'
methods: {
    ...mapMutations([
      'increment',
      'decrement'
    ])
  }

不用MapMutations

可以用

methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    }
  }