1、使用前需要在项目中安装一下vuex
npm install vuex --save 或 cnpm install vuex --save
2、需要了解一下vuex是什么以及vuex提出的几个概念
(1)、vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。(2)、核心概念
State: 单一状态树（静态变量）， 辅助函数（mapState）
Getter: 计算属性，辅助函数（mapGetters）
Mutation: 更改 Vuex 的 store 中的状态的唯一方法，辅助函数（mapMutations）
Action: Ⅰ、Action 提交的是 mutation，而不是直接变更状态。
Ⅱ、 Action 可以包含任意异步操作。
辅助函数（mapActions）
3、实战（计数器）
目录结构如下图
image.png
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions
})
state.js
const state = {
count: 0
}
export default state;
mutations.js
const mutations = {
// 箭头函数方式
// increment: state => state.count++,
// decrement: state => state.count--
increment(state) {
state.count ++
},
decrement(state) {
state.count --
}
}
export default mutations;
actions.js
const actions = {
increment({commit}) {
commit('increment');
},
decrement({commit}) {
commit('decrement');
}
}
export default actions;
main.js
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
store, // 挂载store
components: { App },
template: '<App/>'
})
HelloWorld.vue
<template>
<div class="hello">
<h1>{{count}}</h1>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
},
computed: mapState([
'count'
]),
methods: {
...mapActions([
'increment',
'decrement'
])
}
}
</script>
