vuex的使用

1.vuex

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

vuex包含五个基本的对象

• state :存储状态。
• getters :派生状态
• mutations : 提交状态修改，这是vuex中唯一修改state的方式，但是不支持异步操作，第一个参数默认为state
• actions :和mutations类似。不过actions支持异步操作，第一个参数是和store具有相同参数属性的对象
• modules:store的子模块

---

2.下面介绍vuex在项目中的目录结构以及使用方式

使用的vue-cli脚手架搭建整个项目
那么整个项目目录应该为：其中src下的vuex就是整个vuex的目录结构

 

1532057254(1).jpg

---

3.下面介绍vuex目录下每个文件的配置和作用

• state.js

//state 存储数据的状态
//示例代码
const state =  {
    name:'',
    age:'',
    classes:''
}

export default state

---

• getters.js

//我们一般会用getters来获取state中的状态，而不是直接使用state

const getters = {
    name:(state)=>{
        return state.name
    },
    age:(state)=>{
        return state.age
    },
    classes:(state)=>{
        return state.classes
    },
}
export default getters;

---

• mutation-types.js

//为了是编辑器和lint工具生效我们会将mutations下的所有函数名放到这个文件里

export const SET_NAME = 'SET_NAME'
export const SET_AGE = 'SET_AGE'
export const SET_CLASS = 'SET_CLASS'

---

• mutations.js

//引入mutation-types.js中定义好的一些方法名；
//improts * as types 代表的是将所有的mutation-types.js下的方法名导入进来并且赋值给 types;

import * as types from './mutation-types';
const mutations = {
    //这里使用的是es6 对象的扩展 属性名表达是（即表达式可以作为属性名）
    [types.SET_NAME](state,name){
        state.name = name
    },
    [types.SET_AGE](state,age){
        state.age = age
    },
    [types.SET_CLASS](state,classes){
        state.classes = classes
    }
}
export default mutations;

---

• actions.js

import * as types from './mutation-types';

const actions = {
    //{commit,state} 上面说了actions第一个参数是和store具有相同属性的参数
    //所以这里采用了对象的解构赋值
    name:({commit,state},payload)=>{
        /*payload可以传过来一个对象用来提交多个参数*/
        setTimeout(function(){
            commit(types.SET_NAME,payload)
        },2000)
    },
    age:({commit,state},payload)=>{
        setTimeout(function(){
            commit(types.SET_AGE,payload)
        },3000)
    },
    classes:({commit,state},payload)=>{
        setTimeout(function(){
            commit(types.SET_CLASS,payload)
        },4000)
    }
}
export default actions

• index.js (组装整个vuex);

import Vue from "vue";
import state from './state.js';
import mutations from './mutations';
import actions from './action';
import getters from './getters';
import Vuex from "vuex";

import Logger from 'vuex/dist/logger' //启用日志

Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production'  //是否是生产模式

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    strict:debug,
    plugins:debug?[Logger(0)]:[]
})

---

4.最后将store挂载到main.js里面的vue上就可以了

import store from './vuex/index.js';
new Vue({
    el:"#app",
    store,
    ...
})

---

5.在组件中使用vuex中的某个状态的时候，我们通常会使用vuex为我们提供的语法糖mapGetters、mapActions、mapMutations;这些东西就去参阅文档吧，这里vue文档时光穿梭机vuex官网