vuex 的概念和基础使用

本文只介绍概念的延伸和核心配置，对于vuex 各部分的概念，官方文档已经写的足够清晰简洁。

1、vuex 是什么

基础概念

Vue 的状态管理模式，集中存储管理应用的所有组件的状态。

vuex的核心

vuex 是 Flux 架构的一种实现。Flux 的核心是单向流动：
views 层用户操作 dispatch 触发 action，action 触发 motation 对状态 state 进行修改。

Flux 架构对标 MVC 框架：

views -> store.action      -> mutations  -> state

views -> controller.action -> model      -> database

个人理解

vuex 特性的两个关键字：集中和统一。

• 集中是指组件共享的状态集中管理。
• 统一是指改变状态使用统一的调用。

集中可以解决多个组件依赖同个状态的情况，统一则有利于调试。

2、vuex 何时用

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

3、 vuex 基本配置

以下配置只应用于小型开发中，大型系统需要将各模块分离成不同的文件分别配置。

安装

# npm 安装
npm install vuex --save
# yarn 安装 
yarn add vuex

使用

新建 store/index.js 文件，代码如下

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        todos: [
          { id: 1, text: '...', done: true },
          { id: 2, text: '...', done: false }
        ]
    },
    mutations: {
       increment (state, payload) {
        state.count += payload.amount
      } 
    },
    actions: {
        
    },
     // 可以理解为 store 的计算属性
    getters: {
       doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        } 
    }
});

export default store

在 main.js 中引入store

import store from './store'

new Vue({
  router,
  // 从根实例中注入，该store实例会注入到根组件下的所有子组件中。
  store,
  render: h => h(App)
});