1-vuex基本使用和模块化

基本使用

store文件

// => store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    username: 'mm'
  },
  mutations: {
    updateName (state, payload) {
      state.username = payload
    }
  },
  actions: {
    updateName (ctx, payload) {
      console.log(payload)// 多的参数
      // 发请求 或者异步操作
      setTimeout(() => {
        ctx.commit('updateName', 'rr')
      }, 1000)
    }
  },
  getters: {
    getName (state) {
      return state.username + '--rn'
    }
  },
  modules: {
  }
})

<template>
  <div>
    <p>{{ $store.state.username }}</p>
    <p>{{ $store.getters.getName }}</p>
    <button @click="mutationFn('cc')">changeName</button>
    <button @click="actionFn">ActionName</button>
  </div>
  <router-view />
</template>

<script>
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup () {
    // 1.获取 store对象 值
    const store = useStore()
    // 2.state
    console.log(store.state.username)// mm
    // 3.getters
    console.log(store.getters.getName)// mm--rn
    // 4.mutations函数
    const mutationFn = (name) => {
      store.commit('updateName', name)
    }
    // 5. 调用action 模块
    const actionFn = () => {
      store.dispatch('updateName', '多的参数')
    }
    return {
      mutationFn,
      actionFn
    }
  }
}
</script>

<style lang="less">
</style>

分模块

// => store/index
import { createStore } from 'vuex'

// A 模块 不开启命名空间 state区分,其它的项是不区分模块的
const moduleA = {
  state: {
    username: 'moduleA'
  },
  getters: {
    getName(state) {
      return state.username + '!!!'
    }
  },
  mutations: {
    updateName (state, payload) {
      state.username = payload || 'moduleADefult'
    }
  }
}

// B 模块
const moduleB = {
  namespaced: true,// 开启命名空间
  state: {
    username: 'moduleB'
  },
  getters: {
    getName(state) {
      return state.username + '@@@'
    }
  },
  mutations: {
    updateName (state, payload) {
      console.log(payload)
      state.username = payload || 'moduleBDefult'
    }
  },
  actions: {
    updateName(ctx, payload) {
      setTimeout(() => {
        ctx.commit('updateName', payload)
      }, 500)
    }
  }
}

export default createStore({
  modules: {
    moduleA,
    moduleB
  }
})

<template>
  <div>
    <!-- A模块 -->
    <p>state: {{ $store.state.moduleA.username }}</p>
    <p>getters: {{ $store.getters.getName }}</p>
    <hr>
    <!-- B模块 -->
    <p>state: {{ $store.state.moduleB.username }}</p>
    <p>getters: {{ $store.getters['moduleB/getName'] }}</p>
    <button @click="mFn('rr')">mutationBtn</button>
    <button @click="aFn('ss')">atctionBtn</button>
  </div>
  <router-view />
</template>

<script>
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup () {
    // 1.获取 store对象 值
    const store = useStore()
    const mFn = (name) => {
      store.commit('moduleB/updateName', name)
    }
    const aFn = (name) => {
      store.dispatch('moduleB/updateName', name)
    }
    return {
      mFn,
      aFn
    }
  }
}
</script>

<style lang="less">
</style>