零基础学习Vuex1、vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管

1、vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

2、vuex的作用

你看vuex是什么可能不能够能清楚的了解到vuex到底是什么，因为概念很抽象，那我们就从他的作用，用处来入手，vuex是用来干什么的呢？

答：他的作用是将应用中的所有状态都放在一起,集中式来管理。也就是一个vue项目中的一个公共存储区域，任何人都可以在这里存放数据，任何人也都可以在这里获取数据，资源是共享的，在这里的所有东西任何人都可以用，

这样应该就很清楚，vuex到底是干什么的了吧 ( 上过小学应该都懂了吧? )

2.1 vuex具体什么时候使用

当然你如果继续往下看，那你一定是需要使用vuex的，如果如果没有需求也许你不会看到这篇文章，那么知道了vuex的作用，那你一定也清楚自己什么时候需要用到vuex了，
也许在开发小型项目或者功能的时候，并不需要使用到vuex，不是所有的数据都需要存储到vuex中的，当你某个数据需要频繁使用的时候，当某个数据在跨越父子组件，在两个毫不相关的组件之间需要通信的时候，这些时候你就大可以使用vuex了，因为真的会很方便，

3、 vuex的原理

看完这个流程图也许你还是会很懵逼，这不重要，对vuex有个最基础的认识之后，我们来详细了解vuex中的每个属性具体是做什么的，又是怎么工作的，继续往下看

4、 vuex的安装

首先需要使用一个插件，那第一步一定是安装，不管是什么插件，只需要安装，引入就可以轻松使用，这也是vue组件化的一个强大之处，各种组件按需引入，好了废话不多说，

npm install vuex --save

然后安装完在项目中创建一个store文件夹，在文件夹下创建index.js（或者store.js）

然后就是在index.js中写入代码：

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {},
    getters: {},
    mutations: {},
    actions: {},
})

最后...在main.js中引入store，并且添加到new vue中去

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

import axios from 'axios'
Vue.prototype.$axios = axios


Vue.config.productionTip = false



new Vue({
    axios,
    router,
    store,
    render: h => h(App)
}).$mount('#app')

其实说这么多，只是了解一下vuex的安装引入过程，其实现在构建vue项目都是通过脚手架的方式，直接创建，在创建完之后，你只需要选择vuex这个配置，他自动就会帮你生成并且引入好，不需要手动写，不知道创建可以看看，vue构建项目和配置的文章，里面手把手教学搭建vue项目，，，好，广告时间结束，让我们进入正题：

5、 vuex的属性

5.1 State

state是状态的意思，是用来存放数据的（变量），比如经常变化的值，或是很多组件都需要使用的变量，都可以存放，如果判断是否登录的变量isLogin，那么该怎么使用呢，我们来了解一下：

state:{
    isLogin : false    //定义变量
}

和组件中的data数据一样的写法，定义一个变量，那么定义了一个变量，最终的目的肯定是到处都可以使用他，不然定义也就没有意义了，那么怎么样在组件中获取state中的数据呢？

mounted(){
    this.$store.state.isLogin   //获取数据
}

因为vuex就像一个商店所以也叫store，和路由的用法也很相似，this.$store.state.isLogin直接获取vuex中的state定义的变量
还有一种方式可以获取vuex中state的值

// 从vuex中导入mapState
import { mapState } from 'vuex'; 
export default { 
    mounted() { 
        console.log(this.isLogin); 
    }, 
    computed: { 
        ...mapState(['isLogin']), 
        }, 
    }

那么有获取数据，那肯定也有存数据咯，那存数据应该怎么存呢，那肯定很多人就会认为直接使用赋值表达式就好了，那你就太年轻了，这样就大错特错了，vuex中state的存值是很特别的，往下看：

××    this.$store.state.isLogin = true   //这就大错特错了嗷！！！！！！

5.2 Mutation

Mutation：{
    //修改state中的属性值得方法
    setIsLogin(state,boolean){     
        state.isLogin = boolean
    }
}

看到这个上面的那个问题应该就已经解开了吧，对！没错！state中的属性值需要在mutation中写一个方法来修改，对就是这样！看看如何使用mutation来修改state中的值吧：

this.$store.commit('setIsLogin', true); //第一个参数是Mutation中的方法名，第二个是参数

这样就完成了Mutation的用法，和State值的修改

mutation也可以使用·mapMutations(['setIsLogin'])来替代this.$store.commit('setIsLogin', true);

import { mapMutations } from 'vuex';
export default {
    mounted() { 
        this.setIsLogin({ number: 999 }); 
    },
    methods: { 
        ...mapMutations(['setIsLogin']), 
    },
}

5.3 Getter

getter在什么情况下使用呢，当你在很多页面都引用了vuex中的state值的时候，突然需要在这个值的后面加上一个值，举个栗子：
当你使用了name之后，有个需求，就在每个name前面加上hello，那怎么办，你不可能在每个name前面都加一个name，就很麻烦，所以就有getter，可以用来设置

state: { 
    name: '张三',
}, 
// 在store对象中增加getters属性 
getters: { 
    getMessage(state) { 
        // 获取修饰后的name，第一个参数state为必要参数，必须写在形参上 
        return `hello${state.name}`; 
    } 
},

写好一个方法在hook中调用，调用方式：

mounted(){
    this.$store.getters.getMessage //调用getter中的方法来修改state的值
}

5.4 Action

Actions存在的意义是假设你在修改state的时候有异步操作，vuex作者不希望你将异步操作放在Mutations中，所以就给你设置了一个区域，让你放异步操作，这就是Actions，

actions: { 
    setNum(content) { 
    // 增加setNum方法，默认第一个参数是content，其值是复制的一份store 
        return new Promise(resolve => { 
            ...
        }); 
    } 
}

actions里面的方法返回一个promise对象，来执行异步操作，结合async和await使用，也可以直接使用函数.then的方式，来简单看看代码，具体的异步操作，还需要进一步学习，

async mounted() { 
    await this.$store.dispatch('setNum'); 
},

简单讲一下，在函数前面加上async是函数变为异步操作，await是等待代码执行后继续往下执行，具体的异步操作请转站vue -- 异步操作

其实在初期action的使用是比较少的，对于异步请求不了解的也没有关系，学了上面那些之后就已经可以基础的使用了，等你学会了异步操作之后再来了解也不迟，其实getter，mutation，action，用法基本上都差不多，只是功能不同而已

零基础学习Vuex