vuex的使用（详细）

Vuex概述

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

Vue组件根据数据渲染视图，不同的数据对应不同的视图。我们也可以理解为web应用处于不同的“状态”，每个状态对应数据的一组取值。因此我们将数据抽出来统一管理也可以称为“状态管理”。
举个例子：

一、认识VueX五大板块及作用

1. state：基本数据，存储变量，初始状态
2. mutations：同步处理改变状态
3. actions：异步处理改变Mutations里的状态值
4. module：分模块管理状态仓库
5. getters ：state的计算属性

二、在项目中构建并使用

1.将vuex引入并创建Store仓库

代码如下（示例）：

const state = () => {
    return {
        name: 'Sulr',
        age: 18,
        sex: '男'
    }
}

2.在mutations里改变state里的值

代码如下（示例）：

const mutations = {
    SET_NAME: (state, name) => {
        state.name = name
    },
    SET_AGE: (state, age) => {
        state.age = age
    },
    SET_SEX: (state, sex) => {
        state.sex = sex
    }

}

3.可在actions里定义方法触发mutations里的方法（可以包含任意异步操作）

提交的是 mutation，而不是直接变更状态。
commit：同步操作，写法： this.$store.commit(‘mutations里的方法名’,值)

代码如下（示例）：

const actions = {
    // 改变state里的值
    ChangeAge({ commit }, age) {
        commit('SET_AGE', age)
    },
    // 异步改变state里的值
    asynChangeName({ commit }, name) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                commit('SET_NAME', name)
                resolve('resolve返回的对象name:name')
            }, 2000);
        })
    },

    // 改变多个state里的值
    changeState({ commit }, Object) {
        commit("SET_AGE", Object.age)
        commit("SET_SEX", Object.sex)
    }
}

触发actios里的方法需要dispatch。
dispatch：异步操作，写法： this.$store.dispatch(‘actions方法名’,传值)

4.getters相当于state的计算属性

在主页面可以计算出全局的state中的任意值

注意这里修改的是userInfo里的age值

import Vue from 'vue'
import Vuex from 'vuex'
import userInfo from '@/store/modules/userInfo.js'
Vue.use(Vuex)

export const store = new Vuex.Store({
  modules: {
    userInfo
  },
  getters: {
    age: state => state.userInfo.age + 1
  },
})

5.module分仓库名字管理

此段代码写在store下的index.js中
其余代码均在userInfo.js中，如下import引入

例子中的userInfo在Vue Devtools中也将显示。
代码如下（示例）：

import Vue from 'vue'
import Vuex from 'vuex'
import userInfo from '@/store/modules/userInfo.js'
Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    userInfo
  },
  getters: {
  },
})

6.暴露出modules将所有暴露出去

这是在userInfo里暴露出去的对象，在index.js里直接引用即可

export default {
    namespaced: true, // 在单个模块中通过添加namespaced：true的方式使其成为带命名空间的模块。
    state,
    mutations,
    actions,
    getters
}

组件中使用

<template>
  <div class="HomePage">
    <h1>首页</h1>

    <button @click="change()">调取改变Store里的值</button>

    <p>store里的Name：{{ name }}</p>
    <p>store里getters的age：{{ age }}</p>
    <p>store里点击改变后的age：{{ name }}</p>
  </div>
</template>

 computed: {
    name() {
      return this.$store.state.userInfo.name;
    },
    age() {
      return this.$store.getters.age;
    },
  },
  methods:{
    change(){
      this.$store.dispatch('userInfo/asynChangeName','Sulr.Su')
    }
  }

---

总结

大致对vuex的讲解就到这里了，看到这里你肯定对vuex不陌生了，你会安装它，配置它，读取state的值，甚至修饰读(Getter)，然后你会修改里面的值了(Mutation)，假如你有异步操作并且需要修改state，那你就要使用Action，这样，你就可以在你的项目中用起来vuex啦！加油吧！