欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vuex入门简介、基本用法和使用介绍

程序员文章站 2022-09-16 08:38:33
vuex入门 1.简介 vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件状态,并以相应的规则保证状态以一种可测的方式发生变化。 简...

vuex入门

1.简介

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

简单来说,用来集中管理数据,类似与React中的Redux,都是基于Flux的前端状态管理框架

2.基本用法

初始化项目vuex-demo

vue init webpack-simple vuex-demo

2.1 安装vuex

npm install vuex -S

2.2 创建store.js文件,在main.js中导入并配置store选项

main.js

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

import store from './store.js'
new Vue({
  store,    //配置store选项,指定为store对象,vue会自动把store对象建到所有子组件中,在子组件中通过this.$store访问该store对象
  el: '#app',
  render: h => h(App)
})

2.3 编辑store.js文件

Vuex的核心是store(仓库),相当于一个容器,一个store实例中包含以下属性的方法:

state 定义属性(状态,数据)

getters 用来获取属性

actions 定义方法(动作)

commit 提交变化,修改数据的唯一方式就是显式的提交mutations

mutations 定义变化

注意:不能直接在actions中直接修改数据,数据修改必须在mutations

store.js

/*
vuex配置
 */

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

Vue.use(Vuex);

//定义属性(数据)
var state = {
    count:6
}

//定义getters
var getters = {
    count(state){
        return state.count;
    },
    evenOrodd(state){
        return state.count%2==0?'偶数':'奇数';
    }
}

//定义actions,要执行的操作,如流程判断,异步请求
const actions = {

    increment(context){     //参数context本身也是一个对象:包含commit、dispatch、state
        // console.log(context);
        context.commit('increment');    //提交一个名为increment的变化,名称可以自定义,可以认为是类型名
    },

    //es6写法
    /*
    increment({commit,state}){
        commit('increment');    //提交一个名为increment的变化,名称可以自定义,可以认为是类型名
    },
    */
    decrement(context){
        if(context.state.count > 10){
            context.commit('decrement');
        }
    },
    incrementAsync({commit,state}){
        //es6写法
        /*
        var p = new Promise((resolve,reject) => {
            setTimeout(() => {
                resolve();
            },3000);
        });
        p.then(() => {
            commit('incrementAsync');
        }).catch(() => {
            console.log('异步失败');
        });
        */
        new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve();
            },3000);
        }).then(function(){
            commit('increment');
        }).catch(function(){
            console.log('异步失败');
        });
    }
}

//定义mutations,处理状态(数据)的改变
const mutations = {
    increment(state){
        state.count++;
    },
    decrement(state){
        state.count--;
    }
}

//创建store对象
const store = new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

//导出store对象
export default store;

2.4 编辑App.vue访问

在子组件中访问store对象的俩种方式:

+ 方式1:通过this.$store访问

+ 方式2:通过mapState、mapGetters、mapActions访问,vue提供了俩个方法

mapGetters 获取属性(数据)

mapActions 获取方法(动作)

App.vue

增加减少异步增加

当前数字为:{{count}}

当前数字为:{{evenOrodd}}

<script> import {mapState,mapGetters,mapActions} from 'vuex' export default { name: 'app', data() { return { msg: 'Welcome to Your Vue.js App' } }, //方式1:通过this.$store访问 /* computed:{ count(){ return this.$store.state.count; } } */ //方式2 /* computed:mapState([ 'count' ]), */ // 方式3:通过mapGetters、mapActions访问 computed:mapGetters([ 'count', 'evenOrodd' ]), methods:mapActions([ 'increment', 'decrement', 'incrementAsync' ]) } </script>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; }

3.更好的组织vuex项目结构

|-src
    |-store
        |-index.js  //我们组装模块并导出 store 的地方
        |-getters.js    //根级别的 getter
        |-actions.js    //根级别的 action
        |-mutations.js  //根级别的 mutation
        |-mutationtypes.js  //定义mutation
        |-modules   //分为多个模块,每个模块都有自己的state、getters、actions、mutations
            |-user.js   //用户模块
            |-cart.js   //购物车模块
            |-goods.js  /产品模块
            |.....

index.js

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

Vue.use(Vuex);

import getters from './getters.js'
import actions from './actions.js'
import user from './modules/user.js'

export default new Vuex.Store({
    getters,
    actions,
    modules:{
        user
    }
});

getters.js

const getters = {
    evenOrodd(state){
        return state.user.count%2==0?'偶数':'奇数';
    }
}

export default getters;

actions.js

import mutationtypes from './mutationtypes.js'

const actions = {
  incrementAsync({ commit, state }) {
    new Promise((resolve, reject) => { 
        setTimeout(() => {
         resolve(); 
        }, 3000); 
    }).then(() => {
     commit(mutationtypes.INCREMENT) 
    }).catch(() => {
     console.log('异步操作失败'); 
    });
  }
}

export default actions;

mutationtypes.js

/*
定义类型常量
 */
const INCREMENT = 'INCREMENT'

const DECREMENT = 'DECREMENT'

export default {
    INCREMENT,
    DECREMENT
}

user.js

/*
用户数据
 */

import mutationtypes from '../mutationtypes.js'     //一般把mutation行为定义成常量的形式,一起放在mutationtypes.js中

const state = {
    count:12
}

var getters = {
    count(state){
        return state.count;
    }
}

const actions = {
    increment({commit,state}){
        // commit('increment');     //一般把mutation行为定义成常量的形式,一起放在mutationtypes.js中
        commit(mutationtypes.INCREMENT);
    },
    decrement({commit,state}){
        if(state.count > 10){
            // commit('decrement');
            commit(mutationtypes.DECREMENT);
        }
    }
}

const mutations = {
    // increment(state){
    // mutationtypes.DECREMENT(state){  //mutationtypes.DECREMENT是变量
    [mutationtypes.INCREMENT](state){   //ES6中[]将变量转化为字符串
        state.count++;
    },
    [mutationtypes.DECREMENT](state){
        state.count--;
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'
new Vue({
  store,
  el: '#app',
  render: h => h(App)
})

App.vue

增加减少异步增加

当前数字为:{{count}}

当前数字为:{{evenOrodd}}

<script> import {mapState,mapGetters,mapActions} from 'vuex' export default { name: 'app', data() { return { msg: 'Welcome to Your Vue.js App' } }, //方式1:通过this.$store访问 /* computed:{ count(){ return this.$store.state.count; } } */ //方式2 /* computed:mapState([ 'count' ]), */ // 方式3:通过mapGetters、mapActions访问 computed:mapGetters([ 'count', 'evenOrodd' ]), methods:mapActions([ 'increment', 'decrement', 'incrementAsync' ]) } </script>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; }