store.js
import Vue from 'vue'
import Vuex fom 'vuex'
Vue.use(Vuex)
export default new vuex.store({
state:{ count：0 },
mutations:{ },
actions:{}
})
main.js
import Vue from 'vue'
import App form './App.vue'
import store form './store'
Vue.config.productionTip = false
new Vue({
store,
render: h =>h(App)
}).$mount('#app')
State
//创建store数据源，提供唯一公共数据
const store = new vuex.store({
state:{ count：0 },
mutations:{ },
actions:{}
})
组件访问State中数据的第一种方式：
this.$store.state.全局数据名称
组件访问State中数据的第二种方式：
//1.从vuex中按需导入mapState函数
import { mapState } from ‘vuex’
通过刚才导入的mapState函数，将当前租价需要的全部数据，映射为当前组件的computed计算属性
//2.将全局数据，映射为当前数组的计算属性
computed：{
...mapState(['count'])
}
Mutation
Mutation用于变更Store中的数据。
1，只能通过mutation变更Store数据，不可以直接操作Store中的数据。
2，通过这种方式最然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
//定义Mutation
const store = new Vuex.Stroe({
state:{
count:0
},
mutations:{
add(state){
//变更状态
state.count++
}
}
})
//触发mutation的第一种方式
//触发mutation
methods：{
handel（）{
//触发mutation的第一种方式
this.$store.commit('add')
}
}
可以在触发mutations时传递参数：
//定义Mutation
const store = new Vuex.Stroe({
state:{
count:0
},
mutations:{
add(state，step){
//变更状态
state.count+= step
}
}
})
//触发mutation
methods：{
handel2（）{
//在调用commit函数，
//触发mutations时携带参数
this.$store.commit('add'，3)
}
}
触发mutations的第二种方法
//1，从vuex中按需导入mapMutations函数
import {mapMutations } from ‘vuex’
//2.将指定的mutations函数，映射为当前组件的methods的函数
methods：{
...mapMutations(['add','addN'])
}
Action
Action用于处理异步任务。
如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。
//触发actions的第一种方式
//定义Action
const store=new Vuex.Store({
mutations:{
add(state){
state.count++
}
}，
actions:{
addAsync(context){
setTimeout(()=>{
context.commit('add')
}，1000)
}
}
})
//触发Action
methods：{
handle（）{
//触发actions的第一种方式
this.$store.dispatch（‘addAsync’）
}
}
触发actions异步任务时携带参数：
//定义Action
const store=new Vuex.Store({
mutations:{
addN(state，step){
state.count+= step
}
}，
actions:{
addAsync(context，step){
setTimeout(()=>{
context.commit('addN'，step)
}，1000)
}
}
})
//触发Action
methods：{
handle（）{
//在调用dispatch函数，
//触发actions时携带参数
this.$store.dispatch（‘addAsync’，5）
}
}
//触发actions的第二种方式
// 1.从vuex中按需导入mapActions函数
import { mapActions } form ‘vuex’
//2.将指定的actions函数，映射为当前数组的methods函数
methods：{
...mapActions(['addASync','addNASync'])
}
Getter
Getter用于对Store中的数据进行加工处理形成新的数据。
1，Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
2，Store中数据发生变换，Getter的数据回跟着变化。
//定义Getter
const store = new Vuex.store({
state:{
count:0
}
getters:{
showNum: state => {
return '当前最新的数量是【'+ state.count +'】'
}
}
})
使用getter的第一种方式：
this.$store.getters.名称
使用getter的第二种方式：
import { mapGetters } form 'vuex'
export default {
computed：{
...mapGetters(['showNum'])
}
}
