vuex的使用

vuex是一种集中式管理状态的工具，他也是组件间通信的一种方式，他可以更加方便的在组件间共享数据。

vuex原理

State存放着我们要共享的数据，也就是说我们将要共享的数据放进去，在组件中就不用写了。 我们在组件中使用dispatch方法向actions传递要进行的操作与数据，Actions一般会进行一些业务操作，之后使用commit传递给Mutations，Mutations对state中的数据今年操作，时候重新渲染页面。这就是一个大概的流程，具体流程我们在例子中体现。

打一个比方，组件是来饭店吃饭的客人，他点菜提交给服务员（Actions），之后服务员（Actions）将客人点的菜交给后厨（Mutations）,后厨做菜（对数据进行操作）。

State：唯一的数据源，我们需要把任何一个组件中需要抽取出来的变量放入到state中去

Getters：通过Getters可以派生出一些新的状态

Mutations：更改Vuex的store中的状态的唯一方法时提交mutation Actions：Action提交的是mutation，而不是直接变更状态。Action可以包含任何的异步操作, 但mutation必须是同步操作。

vuex的基本流程

一、配置vuex

首先，安装vuex

npm install vuex --save

作为一个专业守规矩的前端文件当然需要按不同的类型进行合理分类，在src路径下面新建store文件夹，文件夹下面新建index.js

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

Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        name:"博博"
     },
    mutations: {
     },
    actions: {
     }
});
复制代码

在main.js中需要要配置一下，以便于全局使用

import store from './store'

new Vue({
    el: #app,
    router,
    store,//新加的
    components: { App },
    template: '<App/>'
})
复制代码

再就是如何使用status中储存的值了,这边就直接通过原型调用了哈哈哈哈哈哈，vue2中的this用起来还算是很舒服的

this.$store.state.name
复制代码

修改变量的值

this.$store.commit('在mutations中的方法名称,参数)//将参数传给store下面的方法中，修改变量名
this.$store.commit("setToken",result.data.token)
复制代码

当然了有不足的话还希望大家多提意见，下期再见哦。