npm install vuex --save
//main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
//index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
count:1
},
getters:{
getStateCount:function(state){
return state.count+1
}
},
mutations:{
add(state){
state.count = state.count+1
},
reduction(state,n){
state.count = state.count-n
}
},
actions:{//注册actions,类似mothods
addFun(context){//接受一个与store实例具有相同方法的context对象
context.commit("add")
},
reductionFun(context,n){
context.commit("reduction",n)
}
}
})
export default store
//demo.vue
<template>
<div>
<h2>{{count1}}</h2>
<h3>{{this.$store.state.count}}</h3>
<h3>{{this.$store.getters.getStateCount}}</h3>
<button @click="addFun">+</button>
<button @click="reductionFun">-</button>
</div>
</template>
<script>
import {mapState,mapActions,mapGetters} from 'vuex'
export default {
data(){
return {
aaa:''
}
},
computed:{
...mapState({
count1:state=>state.count
})
},
created (){
console.log(this.$store.state.count)
},
methods:{
addFun(){
// this.$store.commit("add")
this.$store.dispatch("addFun")
},
reductionFun(){
// this.$store.commit("reduction")
var n = 10;
this.$store.dispatch("reductionFun",n)
}
}
}
</script>
<style scoped>
</style>
从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态,用计算属性监听数据变化
computed: {
count () {
return this.$store.state.count
}
}
```bash
这里可以使用 context.commit 来提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
a: state => state.a,
b: state => state.b,
c: state => state.c,
// 传字符串参数 'b'
// 等同于 `state => state.b`
bAlias: 'b',
// 为了能够使用 `this` 获取局部状态
// 必须使用常规函数
cInfo (state) {
return state.c + this.info
}
})
}
computed: mapState([
// 映射 this.a 为 store.state.a
'a',
'b',
'c'
])
computed: {
localComputed () {
...
},
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
取个别名
mapGetters({
doneCount: 'doneTodosCount'
})
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
// 将 `this.increment()` 映射为
// `this.$store.commit('increment')`
'increment',
// `mapMutations` 也支持载荷:
// 将 `this.incrementBy(amount)` 映射为
// `this.$store.commit('incrementBy', amount)`
'incrementBy'
]),
...mapMutations({
// 将 `this.add()` 映射为
// `this.$store.commit('increment')`
add: 'increment'
})
}
}
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
// 将 `this.increment()` 映射为
// `this.$store. dispatch('increment')`
'increment',
// `mapActions` 也支持载荷:
// 将 `this.incrementBy(amount)` 映射为
// `this.$store. dispatch('incrementBy', amount)`
'incrementBy'
]),
...mapActions({
// 将 `this.add()` 映射为
// `this.$store. dispatch('increment')`
add: 'increment'
})
}
}