当前位置：移动技术网 > IT编程>网页制作>CSS > vuex入门简介、基本用法和使用介绍

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

2018年04月19日 | 移动技术网IT编程 | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

CSS 控制动画播放与暂停的小技巧(非常实用)

今天要介绍一种很简单的使用 css 控制动画播放与暂停的小技巧。使用好了，可以在很多实际场景得以运用。我们先来看个例子，本例子是我在闲逛 codepen 时看... [阅读全文]
css3 flex布局实现平均分配元素的示例代码

本文主要介绍了css3 flex布局实现平均分配元素，给自己留个笔记，也分享给大家，具体如下：例子一：<!doctype html><html... [阅读全文]
CSS字体、文本、列表属性详细介绍

1.字体属性　　color，规定文本的颜色，如 div{color:red;}　　font-style，规定文本显示方式，如 p.normal {font-st... [阅读全文]
深入理解CSS background-blend-mode的作用机制

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、可能都知道的首先，讲两点大家可能都知道的知识点：1.background-... [阅读全文]
CSS中的四种定位区别详解

我们都知道，前端开发里面的css中常用的定位方式有普通定位，相对定位，绝对定位、固定定位定位这四种。但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和... [阅读全文]
解决移动端1px边框最好的方法(推荐)

在移动端开发时，经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。1px 边框问题的由来苹果 ip... [阅读全文]
让CSS flex布局最后一行列表左对齐的N种方法(小结)

引用分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。问题描述//html<div class="container&... [阅读全文]
CSS 列表模型之marker标记的使用

本文主要对::master伪元素、list-item下的list-style-image、list-style-type样式属性进行介绍，并介绍了在实际中如何使... [阅读全文]
cubic-bezier处理下拉和回弹

/** * 下拉和回弹 * 1.关闭bounce避免ios端下拉冲突 * 2.由于touchm... [阅读全文]
服装面料加工中英双语网站搭建模板

服装面料定制加工公司中英双语网站搭建模板，首页界面干净高端，服装设计和品牌服饰通用模板，排版整齐干净，使用最新织... [阅读全文]