深入了解Vue中Vuex的用法

import Vue from 'vue'
import Vuex from 'vuex'
//安装插件
Vue.use(Vuex)
//创建对象
const store=new Vuex.Store({
    state:{
    },
    mutations:{
    },
    actions:{
    },
    getters:{
    },
    modules:{
    }
})
//导出store对象
export defaule store

import store from 'store路径'
new Vue({
    el:'#app',
    store,//Vue.prototype.$store=store
    render: h => h(App)
})

state:{
    count:10000
}
//任意组件里使用，直接展示
<div>{{$store.state.count}}</div>

<div>{{$store.state.count}}</div>
<button @click="$store.state.count++">+</button>
<button @click="$store.state.count--">-</button>

mutations:{
    inc(state){//默认传入一个state，对应上面的state对象
      state.count++
    },
    dec(state){
      state.count--
    }
}
//方法1
<div>
    <div>{{$store.state.count}}</div>
    <button @click="$store.commit('inc')">+</button>//通过commit方法传入mutations里定义的方法的名字
    <button @click="$store.commit('dec')">-</button>
</div>
//方法2
methods: {
    inc(){
      this.$store.commit('inc')//通过commit方法传入mutations里定义的方法的名字
    },
    dec(){
      this.$store.commit('dec')
    }
},
<div>
    <div>{{$store.state.count}}</div>
    <button @click="inc">+</button>
    <button @click="dec">-</button>
</div>

mutations:{
    add(state,count){//接收参数
      state.count+=count
    },
    subtract(state,count){
      state.count-=count
    }
},
methods: {
    add(count){
      this.$store.commit('add',count)//传递参数
    },
    subtract(count){
      this.$store.commit('subtract',count)
    }
},
<div>
    <div>{{$store.state.count}}</div>
    <button @click="add(5)">+5</button>
    <button @click="subtract(5)">-5</button>
</div>

getters:{
    power(state){//默认传入一个state，对应上面的state对象
      return state.count*state.count
    }
}
<div>平方:{{$store.getters.power}}</div>

//store.js
state:{
    name:'aaa'
},
mutations:{
    updateName(state){
      setTimeout(() => {
        state.name='bbb'
      }, 1000);
    }
},
//组件
<div>{{$store.state.name}}</div>
<button @click="updateName">修改名字</button>
methods: {
    updateName(){
      this.$store.commit('updateName')
    }
},

//store.js
state:{
    name:'aaa'
},
mutations:{
    updateName(state){
        state.name='bbb'
    }
},
actions:{
    updateInfo(context){//上下文，当前可以理解为store对象
        setTimeout(() => {
            context.commit('updateName')//不能直接修改，修改state的唯一途径就是mutations
        }, 1000);
    }
},
//组件
<div>{{$store.state.name}}</div>
<button @click="updateName">修改名字</button>
methods: {
    updateName(){
      this.$store.dispatch('updateInfo')//调用actions里的方法是dispatch
    }
},

const moduleA={
  state:{
    test:'模块a的state'
  },
  mutations:{},
  getters:{},
  actions:{}
}
const moduleB={
  state:{},
  mutations:{},
  getters:{},
  actions:{}
}
const store=new Vuex.Store({
    modules:{
        a:moduleA,
        b:moduleB
    }
})