白话Vuex的使用（Store）

作用

数据要全局显示的工具。Vuex 应用的核心就是 store（仓库）,当 Vue 组件从 store 中读取数据的时候，若数据发生变化，那么相应的组件也会相应地得到高效更新。

使用介绍

先安装下vuex

npm install vuex --save

使用的流程图

定义一个简单的Vuex结构

import Vue from 'vue' 
import Vuex from 'vuex' 

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {  //存放数据
    count: 0
  },
  mutations: { //同步的更改数据
    mutationMethodName (state) {
      state.count++
    }
  },
  actions: {//可异步的更改数据
    actionMethodName (context) {
      context.commit('mutationMethodName')
    }
  }})

Action
Action 和 mutation很像，不同在于：

• Action 提交的是 mutation，而不是直接变更数据。
• Action 可以包含任意异步操作，mutation必须同步

//最简单的分发
store.dispatch('actionMethodName')

// 以载荷形式分发
store.dispatch('actionMethodName', {
  amount: 10})

// 以对象形式分发
store.dispatch({
  type: 'actionMethodName',
  amount: 10})

Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，必须是同步调用。

//通过此操作调用mutation里的方法
store.commit('mutationMethodName')

state
存放数据的地方，当数据被改变的时候会刷新组件。

// 创建一个 Counter 组件const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }}

Getter

可以认为getter是一个计算属性，state只是简单的存放，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

<template>
  <div id="app">
    <button @click="onClick">按钮</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'one', done: true },
      { id: 2, text: 'two', done: false },
	  { id: 3, text: 'three', done: true }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})
	
export default {
  name: 'app',
  methods:{
	  onClick(){
		  console.log(store.getters.doneTodos[1].text)
	  }
  }
}
</script>

Module
当你的项目工程很大的时候，如果不分类存放的话代码就无法阅读和维护了。这时用Module可以将store进行模块化使用。

// 一个Module通常是一个独立的文件，我这里为了表达简单就用moduleA来定义了
const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态