一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

Vuex

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

Vuex 实现了一个单向数据流，在全局拥有一个 State 存放数据，当组件要更 改 State 中的数据时，必须通过 Mutation 提交修改信息， Mutation 同时 提供了订阅者模式供外部插件调用获取 State 数据的更新。 而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作 需要走 Action ，但 Action 也是无法直接修改 State 的，还是需要通过 Mutation 来修改State的数据。最后，根据 State 的变化，渲染到视图 上。

安装

npm

npm install vuex@next --save

Yarn

yarn add vuex@next --save

开始

在main.js中引入:

import Vue from 'vue'
import App from './App'
import store from "./store"

Vue.prototype.$store = store
const app = new Vue({
	store,
    ...App
})

安装 Vuex 之后，让我们来创建一个 store文件夹。然后创建一个index.js文件，提供一个初始 state 对象和一些 mutation。

在index.js中添加：

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

export default new Vuex.Store({
    // 存储数据
    state: {
     
    },
    //计算属性 
    getters: {

    },
    // 同步方法
    mutations: {

    },
    // 异步方法
    actions: {

    }
    //模块化
    // modules:{
    
    // }
})

vuex的优势优点

解决了非父子组件的通信，减少了ajax请求次数，有些可以直接从state中获取缺点：刷新浏览器，vuex中的state会重新变为初始状态，解决办法是vuex-along，得配合计算属性和sessionstorage来实现

vuex 中核心概念

• state ： vuex 的唯一数据源，如果获取多个 state ,可以使用 ...mapState 。
• getter : 可以将 getter 理解为计算属性， getter 的返回值根据他的依赖缓存起来，依赖发生变化才会被重新计算。
• mutation ：更改 state 中唯一的方法是提交 mutation 都有一个字符串和一个回调函数。回调函数就是使劲进行状态修改的地方。并且会接收 state 作为第一个参数 payload 为第二个参数， payload 为自定义函数， mutation 必须是同步函数。
• action ： action 类似 mutation 都是修改状态，不同之处,action 提交的 mutation 不是直接修改状态action 可以包含异步操作，而 mutation 不行action 中的回调函数第一个参数是 context ，是一个与 store 实例具有相同属性的方法的对象action 通过 store.dispatch 触发， mutation 通过 store.commit 提交
• module ：由于是使用单一状态树，应用的所有状态集中到比较大的对象，当应用变得非常复杂是， store 对象就有可能变得相当臃肿。为了解决以上问题， vuex 允许我们将 store分割成模块，每个模块拥有自己的 state,mutation,action,getter ,甚至是嵌套子模块从上至下进行同样方式分割。