首页 > 代码库 > vue2

vue2

2024-10-11 01:28:39   214人阅读

src
    main.js
    App.vue
    store
        actions.js
        actions.js
        index.js
        mutations.js
        types.js

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="http://www.mamicode.com/增加" @click="increment">
    <input type="button" value="http://www.mamicode.com/减少" @click="decrement">
    <input type="button" value="http://www.mamicode.com/偶数才能点击+" @click="clickOdd">
    <input type="button" value="http://www.mamicode.com/点击异步" @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>

 action.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);
		})
	}
}

 getters.js

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

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

 mutation.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
}

 types.js

export const INCREMENT = ‘INCREMENT‘;

export const DECREMENT = ‘DECREMENT‘;

 

vue2


联系
我们