Vuex

Vuex集成

npm i vux -S
/src/store/store.js

import Vuex from 'vuex'

export default () => {
  return new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      updateCount (state, num) {
        state.count = num
      }
    }
  })
}

/src/index.js

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

import createStore from './store/store'

Vue.use(Vuex)

const store = createStore()

new Vue({
	...
	store,
	...
})

/src/app.vue

<tempate>
	<div id="app">
		<p>{{count}}</p>
	</div>
</template>
<script>
	export default {
		...
		mounted () {
			console.log(this.$store)
			let i = 1
			setInterval(() => {
				this.$store.commit('updateCount', i++)
			}, 1000)
		},
		computed: {
			count () {
				return this.$store.state.count
			}
		}
	}
</script>

Vuex之state和getters

/src/store/state/state.js

export default {
  count: 0,
  firstName: 'firstName',
  lastName: 'lastName'
}

/src/store/mutations/mutations.js

export default {
  updateCount (state, num) {
    state.count = num
  }
}

/src/store/getters/getters.js

export default {
  fullName (state) {
    return `${state.firstName} ${state.lastName}`
  }
}

/src/store/store.js

import Vuex from 'vuex'

import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'

export default () => {
  return new Vuex.Store({
    state: defaultState,
    mutations,
    getters
  })
}

/src/app.vue

<tempate>
	<div id="app">
		<p>{{count}}--- {{fullName}}</p>
	</div>
</template>
<script>
import {
  mapState,
  mapGetters
} from 'vuex'

export default {
  mounted () {
    console.log(this.$store)
    let i = 1
    setInterval(() => {
      this.$store.commit('updateCount', i++)
    }, 1000)
  },
  computed: {
    // ...mapState(['count']),
    // ...mapState({count: 'count'})
    ...mapState({
      count: (state) => state.count
    }),
    // count () {
    //   return this.$store.state.count
    // },
    ...mapGetters(['fullName'])
    // fullName () {
    //   return this.$store.getters.fullName
    // }
  }
}
</script>

Vuex之mutation和action

/src/store/state/state.js

export default {
  count: 0
}

/src/store/actions/actions.js

export default {
  updateCountAsync (store, data) {
    setTimeout(() => {
      store.commit('updateCount', data.num)
    }, data.time)
  }
}

/src/store/store.js

import Vuex from 'vuex'

import defaultState from './state/state'
import actions from './actions/actions'

export default () => {
  return new Vuex.Store({
    state: defaultState,
    actions
  })
}

/src/app.vue

<tempate>
	<div id="app">
		<p>{{count}}</p>
	</div>
</template>
<script>
import {
  mapMutations,
  mapActions
} from 'vuex'

export default {
  mounted () {
    console.log(this.$store)
    // this.$store.dispatch('updateCountAsync', {
    //   num: 5,
    //   time: 2000
    // })
    this.updateCountAsync({
      num: 5,
      time: 2000
    })
    // let i = 1
    // setInterval(() => {
    //   this.$store.commit('updateCount', i++)
    // }, 1000)
    let i = 1
    setInterval(() => {
      this.updateCount(i++)
    }, 1000)
  },
  methods: {
    ...mapActions(['updateCountAsync']),
    ...mapMutations(['updateCount'])
  }
}
</script>

Vuex模块

Vuex模块