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官网

你可能感兴趣的:(vuex的使用)