vuex小白入门

首先：Vuex是什么？

有关于Vuex，官网是这样定义的：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
我是这么认为的：Vuex是为了解决多个组件共享状态而存在的。他能够有效的解决兄弟组件，父子组件，爷孙组件的传值。他将组件的共享状态抽取出来，以一个全局单例模式管理。

Vuex有以下5个重要属性：

1、State
单一状态树，每个应用将仅仅包含一个 store 实例。
2、Getter
可以认为是 store 的计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
3、Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
4、Action
类似于 mutation，在于Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作
5、Module
Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。模块内部的 action、mutation 和 getter 是注册在全局命名空间的。

1、不使用Module开发

• 文件存放

└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── state.js          # 跟级别的 state
    ├── getters.js        # 跟级别的 getter
    └── mutations.js      # 根级别的 mutation

• index.js存放的内容

import vue from 'vue';
import vuex from 'vuex';
import state from './state.js';
import * as getters from './getters.js';
import mutations from './mutations.js';

vue.use(vuex);

export default new vuex.Store({
  state,
  getters,
  mutations
});

• state.js存放的内容

const state = {
  name: 'jwl',
  age: 24
};

export default state;

• getters.js存放的内容

export const name = (state) => {
    return state.name;
}

export const age = (state) => {
    return state.age
}

export const other = (state) => {
    return `My name is ${state.name}, I am ${state.age}.`;
}

• mutations.js存放的内容

export default {
    SET_NAME(state, name) {
        state.name = name;
    },
    SET_AGE(state, age) {
        state.age = age;
    }
};

• main.js存放的内容

import App from './App.vue';
import Vue from 'vue';
import router from './router/index.js'
import vuex from 'vuex'
import store from './store'

Vue.use(vuex);

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

• 在组件中使用

2、使用Module开发

• 文件存放

└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    └── modules
        ├── demo1.js         # 模块1
        └── demo2.js         # 模块2

• index.js存放的内容

import vue from 'vue';
import vuex from 'vuex';
import demo1 from './modules/demo1.js';

vue.use(vuex);

export default new vuex.Store({
  modules: {
    demo1
  }
});

• demo1.js存放的内容

const demo1 = {
  state: {
    names: `demo1`
  },
  mutations: {
    change2(state, va) {
      state.names = va.new;
    }
  },
  getters: {
    names(state, getters, rootState) {
      return state.names + 'hhhhh'
    }
  }
}
export default demo1;

• main.js存放的内容不变
• 在组件中使用