Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。
npm install vue-cli -g
- webpack
- webpack-simple
- browserify
- browserify-simple
- simple
vue init <template-name>#版本号 <product-name>
$ cd myApp && npm install
$ npm run dev
$ npm install vuex --save
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
- state，驱动应用的数据源；
- view，以声明方式将state映射到视图；
- actions，响应在view上的用户输入导致的状态变化。
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
使用vuex创建状态,在App.vue下实现计数功能
<div id="app">
<!--count应该归state管理-->
计数器 {{count}}
<button>增加</button>
</div>
创建store
$ cd src && mkdir store
$ cd store && touch index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
count:0
};
export const store = new Vuex.Store({
state
});
在main.js中引入store
import {store} from './store'
new Vue({
el: '#app',
router,
store,
...App
});
在页面上展示count
computed:{
count(){
return this.$store.state.count;
}
}
辅助函数mapState可以简化写法
computed:{
...mapState([ // 不更改数据名
'count'
])
...mapState({ // 更改数据名
count:'count'
})
}
创建mutations
const INCREMENT = 'increment';
const mutations = {
[INCREMENT](state,n){
state.count += n;
}
};
export const store = new Vuex.Store({
state,
mutations
});
更改页面count
<button @click="add">增加</button>
methods:{
add(){
this.$store.commit('increment',1);
}
}
辅助函数`mapMutations可以简化写法
import {mapState,mapMutations} from 'vuex';
methods:{
add(){
this.increment(2);
},
...mapMutations([
'increment'
])
}
mutation只能写同步方法，一般是通过action中的commit提交到mutation中，我们一般只需派发action即可
- Action提交的是mutation，不能直接更改状态
- Action可以包含异步操作
通过action提交到mutation中
const actions = {
[INCREMENT]({commit},n){
commit(INCREMENT,n)
}
};
export const store = new Vuex.Store({
state,
mutations,
actions
});
直接使用mapActions简化操作
import {mapState,mapMutations,mapActions} from 'vuex';
methods:{
add(){
this.increment(1);
},
...mapActions([
'increment'
])
}
想判断当前count是奇数还是偶数
const getters = {
computeCount(state){
return state.count%2==0?'偶数':'奇数'
}
};
export const store = new Vuex.Store({
state,
mutations,
actions,
getters
});
直接使用mapGetters简化操作
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';
computed:{
...mapGetters([
'computeCount'
])
},
在页面上将变量取出
{{count}}
A Vue.js project
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --reportFor detailed explanation on how things work, checkout the guide and docs for vue-loader.