vuex入门

18人阅读 评论(0) 收藏 举报
分类:

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

<template>
  <div id="app">
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="incrementAsync">异步增加</button>
    <p>当前数字为:{{count}}</p>
    <p>当前数字为:{{evenOrodd}}</p>
  </div>
</template>
<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>
<style>
#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;
}

</style>

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

<template>
  <div id="app">
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="incrementAsync">异步增加</button>
    <p>当前数字为:{{count}}</p>
    <p>当前数字为:{{evenOrodd}}</p>
  </div>
</template>
<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>
<style>
#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;
}

</style>
查看评论

vuex入门实例

最后一篇 想写下vuex 2.0以后的变化, 其实严格意义不算入门了 大家随便看看就好 算这个系列的完结吧 :) vuex为了迎合vue2.0的变化 进行了大量的调整和优化 先看下尤大2....
  • hsany330
  • hsany330
  • 2017-03-29 17:39:57
  • 1905

Vuex简单入门

今天试了一下Vuex,感觉跟Redux的实现思想类似。再此,简单地总结一下。 什么是Vuex 在Vue中,多组件的开发给我们带来了很多的方便,但同时当项目规模变大的时候,多个组件间的数据通...
  • sinat_17775997
  • sinat_17775997
  • 2017-02-09 09:36:46
  • 64617

Vuex 入门介绍

什么是Vuex?http://www.jianshu.com/p/490e7726fe67 Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构,它借鉴了 Flux 和 Re...
  • sinat_17775997
  • sinat_17775997
  • 2017-02-12 08:42:21
  • 1880

Vue2.0 探索之路——vuex入门教程和思考

Vuex是什么 首先对于 vuex 是什么,我先引用下官方的解释。http://www.tuicool.com/articles/VviqEzM Vuex 是一个专为 Vue.js 应用程...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-28 19:10:04
  • 3481

Vuex 快速入门

Vuex 快速入门基本用途: 将某些data变成组件间公用的状态,组件随时都可以进行访问和响应,解决了props传值的链式响应的代码冗余 给状态配以公用方法,使得 基本用法:/store/store....
  • TeckerYu
  • TeckerYu
  • 2017-02-07 20:05:40
  • 8028

vue2+vuex+vue-router 快速入门(二) 项目搭建

安装  我们可以通过两种方式把 vue 引入到我们的项目中,一种直接通过 引入 ,这时 vue 会被注册为一个全局变量。第二种便是通过 npm 进行安装,这种方式可以很好的配合 webpack 或 ...
  • minksyb
  • minksyb
  • 2017-12-07 18:24:01
  • 282

vue2+vuex+vue-router 快速入门(一) 简单介绍

vue2  vue 官方解释为一套构建用户界面的渐进式框架。而我的理解 vue 是一套以视图为核心、数据为驱动的组件化开发框架。使用过模板引擎的同学都知道:只要我们把数据传入已经编译好的模板中,便能渲...
  • minksyb
  • minksyb
  • 2017-12-07 18:20:15
  • 337

Vuex2.0边学边记+两个小例子

转载自:http://www.jianshu.com/p/13bec8f5b17d 最近在研究Vuex2.0,搞了好几天终于有点头绪了。 首先vuex概念比较多,一定要搞懂里面的概念,可以参...
  • wulixiaoxiao1
  • wulixiaoxiao1
  • 2017-02-25 17:05:59
  • 5705

最简单的Vuex示例

最简单的Vuex示例 学习Vuex,弄个最简单的例子备忘一下,mapGetters, mapActions, mapMutations, state都用到了。 1.老规矩,vue-cli脚手架来一...
  • tanmx219
  • tanmx219
  • 2017-11-20 11:01:31
  • 477
    个人资料
    等级:
    访问量: 95
    积分: 37
    排名: 195万+
    文章分类
    文章存档