##简介
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
vuex分为三大部分:
state,驱动应用的数据源;
view,以声明方式将 state 映射到视图;
actions,响应在 view 上的用户输入导致的状态变化。
以下是vuex官网提供的的示意图:
一、初始化
vue init webpack-simple 文件名
cd 文件名
npm install
npm install vuex -D // 安装vuex
npm run dev
二、在src创建store.js
// 引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// state 管理数据
const state = {
count: 10,
};
// mutations 处理数据变化
const mutations = {
increment: (state) => {
state.count++;
},
decrement: (state) => {
state.count--;
}
};
// actions 处理要做什么,异步请求,判断,流程控制
const actions = {
increment: ({commit}) => {
commit('increment')
},
decrement: ({commit}) => {
commit('decrement')
},
clickOdd: ({commit, state}) => {
if (state.count % 2 == 0){
commit('increment')
}
},
clickAsync: ({commit}) => {
new Promise((resolve) =>{
setTimeout(function() {
alert(1);
}, 1000);
})
}
};
const getters = {
count: state => {
return state.count;
},
getOdd: state => {
return state.count%2 == 0? "偶数": "奇数";
}
}
export default new Vuex.Store({
state,
mutations,
actions,
getters
});
三、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</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>
// mapAction 管理事件
// mapGetters 获取数据
import {mapGetters, mapActions} from 'vuex'
export default {
computed: mapGetters([
'count',
'getOdd',
]),
methods: mapActions([
'increment',
'decrement',
'clickOdd',
'clickAsync'
])
}
</script>
<style>
</style>
官方推荐使用这样的目录结构
|--src
|--store
|--index.js //
|--types.js // state数据
|--mutations.js // mytations
|--actions.js // actions
|--getter.js // 获取数据
index.js
// 引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 引入actions和mutations
import actions from './actions'
import mutations from './mutations'
import getters from './getters'
export default new Vuex.Store({
modules: {
mutations
},
actions,
getters
})
types.js
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'
mutations.js
import {
INCREMENT,
DECREMENT
} from './types'
const state = {
count: 20
};
const mutations = {
[INCREMENT]: (state) => {
state.count++;
},
[DECREMENT]: (state) => {
state.count--;
}
};
export default {
state,
mutations
}
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 ? "偶数": "奇数";
}
}
App.vue不用变,只需改动main.js的引用
import store from './store/'