频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
vuex入门简介、基本用法和使用介绍
2018-04-16 11:58:11      个评论    来源:likely的博客  
收藏   我要投稿

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


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

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


<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>
点击复制链接 与好友分享!回本站首页
上一篇:ajax跨域问题分析及解决ajax跨域问题的五种方案分享
下一篇:弹幕效果的实现(代码教程)
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站