vuex实践

此文主要为了举例说明vue2.0配合使用vuex，具体文档可以参考vuex官网

1、初始化

mkdir vue-vuex-demo
cd vue-vuex-demo
vue init webpack-simple vuex-test-demo
npm install
npm install vuex -D

2、新建相关文件夹和文件

项目根目录src下新增store文件夹
sotre文件夹下新增index.js、getters.js、actions.js、mutations.js、types.js等文件
//注意index.js不是固定的，可以是其它名字，只是import store文件夹内容的时候默认会去找index.js

3、编写store相关内容

//types.js内容
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

//actions.js内容
import * as types from './types'

export default {
    increment: ({
        commit
    }) => {
        commit(types.INCREMENT);
    },
    decrement: ({
        commit
    }) => {
        commit(types.DECREMENT);
    },
    clickOdd: ({
        commit,
        state
    }) => {
        if (state.mutations.count % 2 == 0) {
            commit(types.INCREMENT);
        }
    },
    clickAsync: ({
        commit
    }) => {
        new Promise((resolve) => {
            setTimeout(function() {
                commit(types.INCREMENT);
            }, 1000);
        })
    }
}

//getter.js
export default {
    count: (state) => {
        return state.count;
    },
    getOdd: (state) => {
        return state.count % 2 == 0 ? '偶数' : '奇数'
    }
}

//mutations.js
import {
    INCREMENT,
    DECREMENT
} from './types'
import getters from './getters'

const state = {
    count: 20
};

const mutations = {
    [INCREMENT](state) {
        state.count++;
    },
    [DECREMENT](state) {
        state.count--;
    }
};

export default {
    state,
    mutations,
    getters
}

//index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

import mutations from './mutations'
import actions from './actions'


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

4、引入store

在入口文件main.js引入store，注意这里默认找的是index.js，可以命名其它然后指定引用。

import store from './store/'

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

5、使用vuex

在你需要用的vue文件引入，例如在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>