vuex
App.vue部分
<template> <div id="app"> <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 { name: 'app', computed:mapGetters([ 'count', 'getOdd' ]), methods:mapActions([ 'increment', 'decrement', 'clickOdd', 'clickAsync' ]) } </script>
main.js部分
import Vue from 'vue' import App from './App.vue' import store from './store.js' new Vue({ store, el: '#app', render: h => h(App) })
建一个store.js文件
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { count:10 } const mutations = {// 处理状态(数据)的变化 increment(state){ state.count++; }, decrement(state){ state.count--; } } const actions = { increment: ({// 处理你要干什么,异步请求,判断,流程控制 commit }) => { console.log(commit); commit('increment') }, decrement:({commit})=>{ commit('decrement') }, clickOdd:({commit,state})=>{ if(state.count%2==0){ commit('increment') } }, clickAsync:({commit})=>{ new Promise((resolve) => { setTimeout(function(){ commit('increment'); resolve(); },1000); }) } } const getters={ count(state){ return state.count; }, getOdd(state){ return state.count%2==0?'偶数':'奇数'; } } //导出store对象 export default new Vuex.Store({ state, mutations, actions, getters });
下面是官方推荐的目录存放
思路图
然后下面是按官方建的各个文件的内容
首先是App.vue
<template> <div id="app"> <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 { name: 'app', computed:mapGetters([ 'count', 'getOdd' ]), methods:mapActions([ 'increment', 'decrement', 'clickOdd', 'clickAsync' ]) } </script>
main.js
import Vue from 'vue' import App from './App.vue' import store from './store/' new Vue({ store, el: '#app', render: h => h(App) })
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 })
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) }) } }
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 }
getters.js
export default{ count:(state)=>{ return state.count }, getOdd:(state)=>{ return state.count%2==0?'偶数':'奇数' } }
types.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';