vuex详解及用法

什么是vuex？

官方解释（vue官网文档）：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

对于初学者来说，当看到上面这段话的时候是这个样子的：原(这)来(是)是(什)这(么)样(啊)，什么是 状态 啊，大神请忽略这种情况，小白们不要慌，请看下面的通俗（其实就是本人认为的）解释，如下：

这里的状态 我们可以理解为就是要共享的数据（这个数据就好比是vue中data()中的数据），也就是说vuex就是把vue组件中需要共享的数据抽离出来，放到一个集中的地方去管理，而这个管理者就是vuex。

vuex使用场景

了解了什么是vuex以后，我们就要知道我们在什么情况下去使用vuex呢？如下：

这里是引用

1. 需要数据回写（回填）的地方，常见的操作就是我们填写一个表单的时候离开了页面，但是当我再次回到这个页面时候我想要去把刚才填过的内容保留下来。
2. 多个组件需要调用同一数据，并且可能在每一个组件中修改数据以后其他组件中的数据需要响应修改。（比如购物车功能）
3. 组件根据不同的状态去渲染（比如登录一个管理系统时候，需要根据用户拥有的权限的不同去渲染对应组件）
   暂时只能想到这些（勿喷），有需要补充的大神请留言，小弟很乐意接受指点。

vuex的使用

npm install vuex --save
或者
cnpm install vuex--save
这里一定要加上 --save ，因为我们不仅仅是在开发模式使用vuex，在生产环境中也需要使用

然后再项目的src下新建一个文件件vuex(文件名随便起，也不是必须要放到src目录下，但是在引入的时候要注意路径的正确即可)，然后在vuex文件夹中新建一个js文件（这里就命名为store.js）接下来需要在store.js文件中引入Vue和Vuex，store.js内容如下

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

Vue.use(Vuex)
// 这里一定要在引入vuex以后给他use一下

vuex 的核心是store（仓库），所以使用vuex需要使用new来实例化一个store

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

Vue.use(Vuex)

const store = new Vuex.Store({
    // store 核心概念
    state: {
        // 用来存放需要共享的数据（状态）
        
    },
    getters: {
        /* 类似computed计算属性，有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：
         getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
         接收的第一个参数是state*/

    },
    mutations: {
        // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Mutation 必须是同步函数

    },
    actions: {
        /* Action 类似于 mutation，只不过Action异步执行的，他俩不同在于
        Action 提交的是 mutation，而不是直接变更状态。
        Action 可以包含任意异步操作。
        接收的第一个参数是一个上下文context对象
        */


    },
    modules: {
        // 将 store 分割成模块，每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
    }
})

export default store
// 这里必须把store暴露出去