vuex-优质好文

Vuex介绍与基本使用步骤

• state -定义数据

  state:{
    count:1，
    name:"哈哈",
    age:25
  }

一般在template中使用：

{{ $store.state.count }}

一般在setup中使用：

const store = useStore()
consloe.log(store.state.count)

👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵

只能在vue2语法中使用

mapState映射函数 映射之后在template中使用：

<template>
{{count}}
{{name}}
{{age}}
</template>
<script>
computed:{
  //数组形式 名字得专一
  ...mapState(["count","name","age"])
}
</script>

<template>
{{HHname}}
{{HHage}}
</template>
<script>
computed:{
  //对象形式
  ...mapState({
    HHname:state => state.name,
    HHage:state => state.age
  })
}
</script>

👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵

由于mapState映射函数在setup中使用很不方，所以可以这样纸：

<template>
{{HHname}}
{{HHage}}
</template>

<script>
const store = useStore()
const {name:HHname,age:HHage} = toRefs(store.state)
</script>

• getters -监听state变化

相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，Getters 可以用于监听state中的值的变化，返回计算后的结果

一般在template中使用：

一般在setup中使用：

const store = useStore()
consloe.log(store.getters.totalPrice)

👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵

只能在vue2语法中使用

👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵👵

• mutations -同步

mutations是一个对象里面的方法 都是同步事务，是更改state初始状态的唯一合法方法，具体的用法就是给里面的方法传入参数state或额外的参数

mutations: {
   increment (state, n) {
     state.count += n
   }
}

一般在setup中使用：

const store = useStore()
store.commit('increment', 10)

//如果开起来空间命名
store.commit("user/increment", 10) 

mutations同级调用：this.commit

const mutations = {
    add(state, payload) {
        state.countB += 10
    },
    plus(state, payload) {
        this.commit('add')
    }
}

mutations中调用getters

this.getters.total(state)
这就是一个对象内的内部调用

• action -异步

action处理异步函数，当这个函数被触发时候，将状态提交到mutations中处理。actions里面自定义的函数接收一个context参数和要变化的形参

context是一个和store实例均有相同方法和属性的对象，所以我们可以从其中获取到commit方法来提交一个mutation，或者通过 context.state 和 context.getters 来获取 state 和getters

一般在setup中使用：

store.dispatch("changgeName1Action",'任意值')

• module - 模块化

namespaced: true 的方式使其成为带命名空间的模块

//state
store.state.user.xxx

//mutations
store.commit("user/xxx")

//getters
store.getters["user/xxx"]

//action
store.dispatch('user/xxx')

实例

（src/store/modules/global.js）

// 全局store,存放全局使用共享的数据
export default { // 注意：全局模块中不需要开启命名空间
  state: {
  },
  mutations: {
  },
  actions: {
  },
  getters: {
  }
}

（src/store/modules/user.js）

// 用户信息模块(局部模块)
export default {
  namespaced: true, // 开启命名空间
  state () {
    return {
      // 用户信息对象 
      profile: {
        id: '',
        avatar: '',
        nickname: 'yee',
        token: ''
      }
    }
  },
  mutations: {
    // 定义mutations，用于同步修改状态
    updateNickname (state, payload) {
      state.profile.nickname = payload
    }
  },
  actions: {
    // 定义actions，用于异步修改状态
    // 2秒后更新状态
    updateNickname (context, payload) {
      setTimeout(() => {
        context.commit('updateNickname', payload)
      }, 2000)
    }
  },
  getters: {
    // 定义一个getters
    formatNickname (state) {
      return 'Hi ' + state.profile.nickname
    }
  }
}

（src/store/index.js）

import { createStore } from 'vuex'
// 全局模块
import global from './modules/global'
// 局部模块
import user from './modules/user'
 
export default createStore({
  // 全局模块
  ...global,
  // 局部模块
  modules: {
    user
  }
})

template中使用vuex

<template>
  <div>测试组件</div>
  <hr>
  <div>获取Store中user模块的getters: {{$store.getters['user/formatNickname']}}</div>
  <button @click='handleClick'>点击</button>
</template>
 
<script>
import { useStore } from 'vuex'
export default {
  name: 'Test',
  setup () {
    // this.$store.state.info
    // Vue3中store类似于Vue2中this.$store
    const store = useStore()
    console.log(store.state.user.profile.nickname)
    // 修改nickname的值
    const handleClick = () => {
      // 触发mutations，用于同步修改user模块state的信息
      // store.commit('updateNickname', 'Jackson')
      store.dispatch('user/updateNickname', 'Yee')
    }
    return { handleClick }
  }
}
</script>