vuex基础五个属性和基本用法

vue中vuex的五个属性和基本用法

VueX 是一个专门为 Vue.js 应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

Vue有五个核心概念，state, getters, mutations, actions, modules。本文将对这个五个核心概念进行梳理。

创建vuex.js

配置要依赖

import vue from 'vue'

import vuex from 'vuex'

Vue.use(vuex);

exoprt var store default new Vuex.Store{

　　state:{},//定义属性值

　　mutations:{},//设置方法函数，注意：mutations不能有异步处理，因为有异步处理程序会很调试，devtooles也会很难追踪到状态

　　actions:{},//用来处理mutatuions的异步处理

　　getters:{}//此方法和vue中的computed一样

}

1.state

state与vue中的data类似，都是用来定义属性值。

例：state:{

　　psd:'123456',

　　phone:'13927975000',

　　time:1

}

2.mutations

mutations用来定义方法，可以通过这个来修改state中的属性值,写方法是最好采用大写

例：mutations:{

　　MODIFY(key){

　　　　state.psd = key;

　　},

　　TIME(){

　　　　state.time++;

　　}

}

3.actions

actions因为mutations不能处理异步程序，所以用actions处理，actions不能自己定义方法，都是通过调用mutations中的方法,写方法是最好采用大写

例：actions:{

　　 MODIFYTIME({commit}){

　　　　setTimeout(function(){

　　　　　　commit('TIME');

　　　　},1000);

　　}

}

4.getters

getters与vue中的computed相似，可以监听每个属性值的变化

例：getters:{

　　msg(state){

　　　　var msg = '';

　　　　if(state.psd == ''){

　　　　　　msg  = '密码不能空'；

　　　　}else{

　　　　　　msg = ’设置成功‘;

　　　　}

　　　　return  msg ;

　　}

}

 

在app.vue页面中引用

import store from './vuex.js';

import {mapState,,mapMutations,mapActions,mapGetters}  from 'vuex';

new Vue({

　　el:'#app',

　　store:store,

　　data:{},

　　methods:{

　　　　//mutations用法,第一种

　　　　modify(){

　　　　　　store.commit('MODIFY');

　　　　}

　　　　//mutations用法,第二种

　　　　...mapMutations[{

　　　　　　modify:'MODIFY'

　　　　}],

　　　　

　　　　//actions用法,第一种

　　　　modifytime(){

　　　　　　store.commit('MODIFYTIME');

　　　　}

　　　　//actions用法,第二种

　　　　...mapActions[{

　　　　　　modifytime:'MODIFYTIME'

　　　　}]

　　},

　　computed:{

　　　　//获取state中的值,第一种写法

　　　　psd(){

　　　　　　return this.$store.state.psd;

　　　　}

　　　　//获取state中的值,第二种写法

　　　　...mapState[{ psd:store => store.state.psd}]

　　　　

　　　　//获取getters中的值,第一种写法

　　　　msg(){

　　　　　　return this.$store.state.msg;

　　　　}

　　　　//获取getter中的值,第二种写法

　　　　...mapGetters[{ msg:store=> store.getters.msg}]

　　}

});