vuex初始化和模块化

初始化

先看目录结构

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  modules: {
  }
})

state.js

let state = {
  num : 0
}
export default state

mutations

let mutations = {
  CHANGE_NUM(state,num){
    state.num = num
  }
}
export default mutations

actions

let actions = {
  changeStateNum({commit},num){
    commit("CHANGE_NUM",num)
  }
}
export default actions

模块化

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import app from "./modules/app"
import common from "./modules/common"
Vue.use(Vuex)

export default new Vuex.Store({

  modules: {
    app,
    common
  }
})

modules>app.js

const state = {
  num: 0
}
const mutations = {
  CHANGE_NUM(state, num) {
    state.num = num
  }
}
const actions = {
  changeStateNum({
    commit
  }, num) {
    commit("CHANGE_NUM", num)
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

 modules>common.js

const state = {
  commonNum: 0
}
const mutations = {
  CHANGE_NUM(state, num) {
    state.commonNum = num
  }
}
const actions = {
  changeStateNum({
    commit
  }, num) {
    commit("CHANGE_NUM", num)
  }
}
export default {
  namespaced:true,
  state,
  mutations,
  actions
}

在app.js内部跨组件调用common内部action

const state = {
  num: 0
}
const mutations = {
  CHANGE_NUM(state, num) {
    state.num = num
  }
}
const actions = {
  changeStateNum({
    commit,dispatch
  }, num) {
    dispatch('common/changeStateNum',50,{root: true})//第三个参数，从根组件查找
console.log(dispatch);
    commit("CHANGE_NUM", num)
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

 模块化后在组件触发的方法

<template>
  <div>
    {{ count }}
    <button @click="changeNum">触发</button>
  </div>
</template>

<script>
import Son from "./text.vue";
import { mapState ,mapActions} from 'vuex'
export default {
  data() {
    return {
      num: 0,
      name: "baby",
    };
  },
  components: {
    Son,
  },
  computed:{
    ...mapState({
      count:state=>state.app.num
    })
  },
  methods: {
     ...mapActions([
    'app/changeStateNum', 
  ]),
    changeNum() {
    this['app/changeStateNum'](50)
    },
  },
  mounted(){
    //另外一种方法
    //this.$store.dispatch("app/changeStateNum",50)
  }

};
</script>

<style  scoped>
div {
  padding: 50px;
}
</style>

vuex4.0

mian.js

import  store  from './store'
app.use(store)

store>index.js

import { createStore } from 'vuex'
import app from "./modules/app"
import common from "./modules/common"
// 创建一个新的 store 实例
const store = createStore({
  modules:{
    app,
    common
  }
})
export default store

app.js

let state = {
  username: 'admin',

},
getters = {
  username: state => state.username,
},
mutations = {
 setUsername (state, username) {// 设置用户名
     state.username = username
 },
},
actions = {
  testActions ({ commit }, num) {
    debugger
          commit('setUsername', num)
          console.log(num)
  }
};
export default { namespaced:true, state, getters, mutations, actions }

页面使用

import { computed } from "vue"
import { useStore, mapState } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
    setup () {
          const store = useStore();
          const router = useRouter();
          const num= computed(() => store.getters["common/num"]);
          let commonData = mapState('common',['colony'],
          let name = computend(()=>commonData.colony.bind({ $store: store }))
          const linkto = (val) => {
              store.commit('common/setColony',val)
              router.push({name:'test'})
              
            };
          return{
            linkto,
            num,
            name
          }
    }
}