vuex

最新推荐文章于 2024-09-22 18:59:52 发布

weixin_30433075

最新推荐文章于 2024-09-22 18:59:52 发布

阅读量46

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yaowen/p/7072360.html

本文介绍如何使用 Vuex 进行 Vue 应用的状态管理。包括安装配置、定义状态、提交 mutation 更新状态、触发 action 处理异步操作及 getter 获取状态等核心概念。

vuex：集中式管理数据
http://vuex.vuejs.org/

安装项目：cnpm install
安装vuex: cnpm install vuex -D

vuex提供个两个方法：
    mapActions:管理所有事件
    mapGetters：获取数据

main,js

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

import store from './store'

new Vue({
    store,
    el: '#app',
    render: h => h(App)
})

App.vue

<template>
  <div id="app">
    <h3>welcome vuex-demo</h3>
    <input type="button" value="增加" @click="increment">
    <input type="button" value="减少" @click="decrement">
    <input type="button" value="偶数才能点击+" @click="clickOdd">
    <input type="button" value="点击异步" @click="clickAsync">

    <div>
      现在数字为: {{count}}, 它现在是 {{getOdd}}
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex'

  export default{
    computed:mapGetters([
      'count',
      'getOdd'
    ]),
    methods:mapActions([
      'increment',
      'decrement',
      'clickOdd',
      'clickAsync'
    ])
  }
</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;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

store.js

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

Vue.use(Vuex);

var state = {
    count: 10   //不能有分号
};

const mutations = {//处理const actions后的操作
    increment(state) { //处理状态(数据)变化
        state.count++;
    },
    decrement(state) {
        state.count--;
    }
};

const actions = {//接受页面的点击事件
    increment: ({ //处理你要干什么，异步请求，判断，流程控制
        commit
    }) => {
        commit('increment')  //commit是函数，提交给mutations的increment(state)
    },
    decrement: ({
        commit
    }) => {//不用箭头函数也可以
        commit('decrement');
    },
    clickOdd: ({
        commit,
        state
    }) => {
        if (state.count % 2 == 0) {
            commit('increment')//提交动作
        }
    },
    clickAsync: ({
        commit
    }) => {
        new Promise((resolve) => {//Promise是es6的
            setTimeout(function() {
                commit('increment');
                resolve();//继续向下走
            }, 1000);
        });
    }
};

const getters = {  //页面获取{{count}}，{{getOdd}}
    count(state) {
        return state.count;
    },
    getOdd(state) {
        return state.count % 2 == 0 ? '偶数' : '奇数';
    }
};


//需要导出Store对象
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
});