1. 安装
npm install vuex --save
2. 创建一个store仓库 store.js
3. 引入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
4 .挂载
在main.js中
import store from './store/store.js'
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})
5. 使用
(1)State提供唯一的公共数据源，所有共享的数据都要统一放到Store的state中进行存储
(2)Mutation 用于变更Store 中的数据
(3) 只能通过mutation 变更Store数据，不可以直接操纵Store中的数据
(4) 通过这种方式虽然操作起来稍微繁琐些，但是可以集中监控所有数据 的变化
(5)mutation中不能执行异步的操作
(6)Action 用于处理异步任务
注：如果通过异步操作变更数据，必须通过Action, 不能使用Mutation但是在Action中还是要通过Mutation的方式间接变更数据
(7)Getter用于对Store中已有的数据加工处理以后形成新的数据，类似与Vue 的计数器
(8)Store 中的数据发生变化，Getter的数据也会跟着变化
export default new Vuex.Store({
state: {
count: 0
},
// 只有mutations才有权限变更state的数据
mutations: {
add (state) {
state.count++
},
// 传参
addN (state, step) {
state.count += step
},
sub (state) {
state.count--
},
// 传参
subN (state, step) {
state.count -= step
}
},
// context 相当于vuex的一个实例对象
actions: {
addAsync (context) {
setTimeout(() => {
// 依然调用 mutations的commit方法变更数据
context.commit('add')
}, 1000)
}，
// 传参
addNAsync (context, step) {
setTimeout(() => {
context.commit('addN', step)
}, 1000)
}，
subAsync (context) {
setTimeout(() => {
// 依然调用 mutations的commit方法变更数据
context.commit('sub')
}, 1000)
},
// 传参
subNAsync (context, step) {
setTimeout(() => {
context.commit('subN', step)
}, 1000)
}
},
getters: {
showNun: state => {
return '当前最新的的值是【' + state.count + '】'
}
}
})
(3). 新建组件addition.vue subtraction.vue在app.vue中调用
(1) 组件中访问state中的数据的第一种方式
this.$store.state.全局数据名称 如 {{$store.state.count}}
(2) 组件中触发 mutation 的第一种方式
this.$store.commit('mutations中的方法') 如 this.$store.commit('add')
(3) 组件中触发 Action的第一种方式
this.$store.dispatch('actions中的方法') 如 this.$store.dispatch('addAsync')
(4) 组件中触发getters的第一种方法
this.$store.getters.名称 如 {{$store.getters.showNun}}
<template>
<div>
<!-- <p>当前最新的的值是: {{$store.state.count}}</p> -->
<h3>{{$store.getters.showNun}}</h3>
<button @click="addCount">+ 1</button>
<button @click="addNCount">+ N</button>
<button @click="addAsyncCount">+ Async</button>
<button @click="addAsyncNCount">+N Async</button>
</div>
</template>
<script>
export default {
name: 'addition',
data () {
return {}
},
methods: {
// commit 是触发Mutation的方法
addCount () {
this.$store.commit('add')
},
addNCount () {
this.$store.commit('addN', 3)
},
// dispatch是触发Action 的方法
addAsyncCount () {
this.$store.dispatch('addAsync')
}，
,
addAsyncNCount () {
this.$store.dispatch('addNAsync', 3)
}
}
}
</script>
<style scoped>
</style>
3.3 组件中访问 state 中的数据的第二种方式
(1) 从vuex中按需导入 mapState 函数
import { mapState } from 'vuex'
(2) 通过导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
computed: {
...mapState(['count'])
}
3.4 组件中访问mutation中的数据的第二种方式
(1) .从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'
(2) 将指定的 mutations 函数，映射为当前组件的 methods 函数
methods: { ...mapMutations(['add'], 'addN') }
(3) 直接在methods方法调用或者直接绑定给click 函数 @click="subNAsync(2)
handleCubtraction () { this.sub() }
@click="subNAsync(2)
3.5 组件中访问Action 的第二种方式
(1) 从 vuex中按需导入 mapActions 函数
import { mapActions } from 'vuex'
(2) 将指定的actions函数，映射为当前组件的 methods函数
methods: { ...mapActions(['subAsync', 'subNAsync']), }
3.6 组件中访问getters中的数据的第二种方式
(1) . 从vuex中按需导入 mapGetters 函数
import { mapGetters } from 'vuex'
(2) 通过导入的mapGetters 函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
computed: { ...mapGetters(['showNun']) }
<template>
<div>
<!-- <p>当前最新的的值是: {{count}}</p> -->
<p>{{showNun}}</p>
<button @click="handleCubtraction">- 1</button>
<button @click="subN(2)">- 6</button>
<button @click="subAsync">- Async</button>
<button @click="subNAsync(2)">-3 Async</button>
</div>
</template>
<script>
import {
mapState, mapMutations, mapActions, mapGetters
} from 'vuex'
export default {
name: 'subtraction',
data () {
return {}
},
computed: {
...mapState(['count']),
...mapGetters(['showNun'])
},
methods: {
...mapMutations(['sub', 'subN']),
...mapActions(['subAsync', 'subNAsync']),
handleCubtraction () {
this.sub()
}
}
}
</script>
<style scoped>
</style>
