vuex使用_vuex strict: debug-CSDN博客

本文链接：https://blog.csdn.net/qq_44895567/article/details/123850771

vuex使用：
1.先安装vuex依赖（安装官方文档的方法）
2.首先建立store文件夹。导入vuex，新建一个index.js文件，作为组装模块的地方。并同时导入actions，getters等相关模块

import Vuex from 'vuex'
Vue.use(Vuex)

3.在index.js中组装模块

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  // vuex调试
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

4.使用state和getter时，需要使用computed引用以保留响应性。因此在vue文件中，可在computed中进行如下调用，也可不在computed中调用，即可使用相关的属性。

  data() {
    return {
      show: false
    }
  },
  computed: {
    ...mapGetters(['playing', 'playlist', 'currentMusic'])
  },

    ...mapMutations({
      setPlaying: 'SET_PLAYING',
      setCurrentIndex: 'SET_CURRENTINDEX',
      clearPlaylist: 'CLEAR_PLAYLIST'
    }),
    ...mapActions(['removerPlayListItem', 'clearPlayList'])

附：vuex四个重要的模块。state，mutations，actions，getters
1.state：把需要进行状态管理的量都放进进来（定义状态，并赋予初始值）

const state = {
  audioEle: null, // audio元素
  mode: Number(getMode()) || playMode.listLoop, // 播放模式，默认列表循环
  playing: false, // 播放状态
  playlist: [], // 播放列表
  orderList: [], // 顺序列表
  currentIndex: -1, // 当前音乐索引
  historyList: getHistoryList() || [], // 播放历史列表
  uid: getUserId() || null // 网易云用户UID
}

2.mutations：作用是对state的状态进行修改（类似java，mutations等于一个类，类中存了许多修改state状态的方法，但这个类只有函数，没有属性。）。mutations包含一个字符串函数名type，和事件处理handle。可以携带参数。
mutations只可以携带一个state和一个payload（载荷），也就是最多只能传入一个参数。如果要传入多个参数，可以将载荷设置为一个对象，这样就可以传递多个参数。

**a.**传入一个对象，也可以将对象改为一个变量，也可以不传递这个参数，只带第一个state参数

// ...
//mutations中定义的函数
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
//调用方式
store.commit('increment', {
  amount: 10
})

**b.**另外一种定义和调用方式。调用只传入一个对象，但是对象中必须指定type属性，而type属性就要包含调用的方法（字符串打引号）。

//函数调用。
store.commit({
  type: 'increment',
  amount: 10
})
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

const mutations = {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
  // 修改audio元素
  [types.SET_AUDIOELE](state, audioEle) {
    state.audioEle = audioEle
  },
  // 修改播放模式
  [types.SET_PLAYMODE](state, mode) {
    state.mode = mode
  },

3.注意，可以使用常量作为mutations事件type，这样更方便你的合作者使用mutations。可以设置一个mutations-type文件。

export const SET_AUDIOELE = 'SET_AUDIOELE' // 修改audio元素
export const SET_PLAYMODE = 'SET_PLAYMODE' // 修改播放模式
export const SET_PLAYING = 'SET_PLAYING' // 修改播放状态
export const SET_PLAYLIST = 'SET_PLAYLIST' // 修改播放列表
export const SET_ORDERLIST = 'SET_ORDERLIST' // 修改顺序列表
export const SET_CURRENTINDEX = 'SET_CURRENTINDEX' // 修改当前音乐索引
export const SET_HISTORYLIST = 'SET_HISTORYLIST' // 修改播放历史列表
export const SET_UID = 'SET_UID' // 修改网易云用户UID

3.action通过commit调用mutations，与mutations不同的是，只能进行异步操作。如果需要在actions中使用异步操作，那么就不能使用commit进行调用，而应该是

store.dispatch('increment')

不过一般都是使用commit进行提交。另外，首先actions第一个参数，是commit对象（注意对象作为参数时，要使用大括号），第二个参数与mutations类似，可以传递一个变量或者对象。

// 选择播放（会更新整个播放列表）
export const selectPlay = function({ commit }, { list, index }) {
  commit(types.SET_PLAYLIST, list)
  commit(types.SET_ORDERLIST, list)
  commit(types.SET_CURRENTINDEX, index)
  commit(types.SET_PLAYING, true)
}

4.getters模块，主要是定义state中需要返回的一些状态，或者对状态进行适当筛选后，返回一些新的状态。（并不完全与state中的状态一一对应）

// audio元素
export const audioEle = state => state.audioEle
// 播放模式
export const mode = state => state.mode
// 播放状态
export const playing = state => state.playing

5.常用的api
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
…MapGetters{[‘a’,‘b’]}

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

如果你想将一个 getter 属性另取一个名字，使用对象形式：

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})
``

mapActions。mapMutations。mapState用法与此类似。等同于把一些方法引入进来。

```javascript

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}