Vuex如何使用

1：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,简单说Vuex可以帮助我们管理一
些共享状态。
2：为什么？
（1）多个组件依赖同一个状态。
（2）不同组件需要操作同一个状态
因此，把组件的共享状态抽取出来，任何组件都能获取状态或者触发行为
3：Vuex 应用的核心是 store（仓库），包含着应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

    Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应
地得到更新。

    你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

使用：
1：安装

cnpm install vuex --save

2：创建store
    在项目中的src目录创建一个store文件夹，再添加store.js到store文件中
3：编写store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    count:0
  },
  mutations:{//简单的计数
    increment(state){
      state.count++
    },
    decrement:state => state.count --,
  }
})

4. 在src目录中的main.js中配置store

import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store/store.js'
Vue.use(Vuex)

new Vue({
  el: '#app',
  router,
  store,//注册
  components: { App },
  template: '<App/>'
})

5：组件中使用

<template>
  <div class="firstPage">
    {{count}}
      <p><button @click="increment">增加</button></p>

  </div>
</template>
<script>
 
export default {
  name: 'page-tabbar',
  data() {
    return {
      
  },
  computed:{
    count(){
      return this.$store.state.count//当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM
    }
  },
  methods:{
    add(){
      console.log(this.$store);
      this.$store.commit('increment')//通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：
    }
  }
};
</script>
<style scoped lang="scss">
  
</style>

Vuex中完整的 store 配置：

const store = new Vuex.Store({
   state: {},//相当于组件中的data属性，定义一些数据
   getters: {}, //相当于组件中的computed计算属性
   mutations: {}, //相当于组件中的methods方法
   actions： {},//定义一些异步方法
   modules： {//模块，每个模块可以包含自己的一些状态，计算属性和方法
      home: {
         state: {},
         getters: {}, 
         mutations: {}, 
         actions： {},
      }
   }
 });

 

Vuex中的一些API

辅助函数：仅仅是将 store 中的 state,getter,mutations和action生成局部的计算属性(如果一个组件中需要获取多个状态，将这些状态都声明为计算属性会有些重复和冗余)。

（1）state和mapState 辅助函数

state:state就是根据你项目的需求，自己定义的一个数据结构

mapState 函数返回的是一个对象，当一个组件需要获取多个状态时候，可以使用 mapState 辅助函数帮助我们生成计算属性
1.在组件中先引入

 import { mapState } from 'vuex'

2.store.js中定义

export default new Vuex.Store({
  state:{
    count:0,
    blogTitle: 'hello world!'
  }
})

3.组件中使用

<template>
    <div>
        <p>{{title}}</P>
    </div>
</template>
export default {
  // ...
  computed: 
    ...mapState({
      title: 'blogTitle'//title为自己定义的属性，blogTitle为store.js中定义的
    })
}

（2）getter(可以认为是store的计算属性）以及mapGetters 辅助函数

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'hello', done: true },
      { id: 2, text: 'shanghai', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }，
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  }
})

mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

（3）Mutation和mapMutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，类似于事件.
mutation 必须是同步函数
mutations使用commit方法
mutations接收state作为参数

（4）Action和mapAction

Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
Action 通过 store.dispatch 方法触发.
Action 接收context参数（对象），可以使用context.commit 提交 mutation，可以使用context.state或者context.getters来获取state和getters

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})