Vuex各种状态的使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
调试工具：vue devtools (Vue开发工具)
Vuex就像眼镜：您自会知道什么时候需要它。

// npm下载 vuex和vue版本对不上会报错
npm install vuex@3 --save // Vue2.x
npm install vuex@4 --save // Vue3.x

// Vuex 引入
// 创建 src -> store -> index.js 文件
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({ //可以简写为: export default new Vuex.....
  state: { // 在 state 中存放全局数据, 相当于组件中的 data
    num: 0 // 定义数据
  },
  getters: { // 统一的 计算 都放到 getters 内使用(computed)
    getNum(state) {
      return state.num;
    }
  },
  mutations: { // 只有 mutations 才可以让 Vue devtools Vuex内的state改变
  // mutations相当于组件中的methods，但是它不能使用异步方法（定时器、axios）
    addNum(state, payload) { // payload 形参, 有值 + payload, 没值为 undefined.
      return payload ? state.num + payload : state.num + 1;
    }
  },
  actions: { // actions是专门用来处理异步的, 但实际修改状态值的还是mutations
    actionsMethod({commit}) { // commit 为解构, 参数为 content.commit
      commit('addNum'); // 实际数据提交还是mutations, actions的异步方法,要提交到mutations中进行计算
    }
  },
  modules: {
    // 多模块使用
  },
})

<template>
  // <div>{{$store.state.num}}</div> // 直接调用
  <div>{{num}}</div> // 利用辅助函数
</template>
<script>
import { mapState } from 'vuex'; // 辅助函数引入
export default {
  computed: {
    // mapState放在computed计算属性中
    ...mapState(['num']); // 辅助函数
  }
}
</script>

<template>
  // <div>{{$store.getters.getNum}}</div> // 直接调用
  <div>{{getNum}}</div> // 利用辅助函数
</template>
<script>
import { mapGetters } from 'vuex'; // 辅助函数引入
export default {
  computed: {
    // mapGetters放在computed计算属性中
    ...mapGetters(['getNum']); // 辅助函数
  }
}
</script>

<template>
  // <button @click="$store.commit('addNum', 5)">点击加state.num</button> // 直接调用commit提交到mutations
  <button @click="addNum">点击加state.num</button> // 给个点击方法,详见下方methods
</template>
<script>
import { mapMutations } from 'vuex'; // 辅助函数引入
export default {
  methods: {
    // mapMutations 放在methods中
    ...mapMutations (['addNum']); // 辅助函数
    addNum() {
      // this.$store.commit('addNum', 5); // 参数传就加
      this.$store.commit('addNum'); // 不传就只加1
    }
  }
}
</script>

<template>
  // <button @click="$store.dispatch('actionsMethod')">点击加state.num</button>
  <button @click="actionsMethod">点击加state.num</button>
</template>
<script>
import { mapActions } from 'vuex'; // 辅助函数引入
export default {
  methods: {
    // mapActions 放在methods中
    ...mapActions (['actionsMethod']); // 辅助函数
    actionsMethod() {
      this.$store.dispatch('actionsMethod'); // 不传就只加1
    }
  }
}
</script>

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
 // ...mapState([])以及...mapGetters([]), 是放在computed计算属性中的
 // ...mapMutations([])以及...mapActions ([]), 是放在methods方法中的

// store中的所有属性,都可以拆分成单独的js书写
// store -> index.js 文件
import Vue from 'vue';
import Vuex from 'vuex';
import state form './state.js';
import getters form './getters.js';
import mutations form './mutations.js';
import actions form './actions.js';
Vue.use(Vuex);
const store = new Vuex.Store({ //可以简写为: export default new Vuex.....
  state,
  getters,
  mutations,
  actions 
  modules: {
    // 多模块使用
  },
})

export default { // 在 state 中存放全局数据, 相当于组件中的 data
  num: 0 // 定义数据
}

export default { // 统一的 计算 都放到 getters 内使用(computed)
  getNum(state) {
    return state.num;
  }
}

export default { // 只有 mutations 才可以让 Vue devtools Vuex内的state改变
// mutations相当于组件中的methods，但是它不能使用异步方法（定时器、axios）
  addNum(state, payload) { // payload 形参, 有值 + payload, 没值为 undefined.
    return payload ? state.num + payload : state.num + 1;
  }
},

export default { // actions是专门用来处理异步的, 但实际修改状态值的还是mutations
  actionsMethod({commit}) { // commit 为解构, 参数为 content.commit
    commit('addNum'); // 实际数据提交还是mutations, actions的异步方法,要提交到mutations中进行计算
  }
}

// 多模块
// store -> index.js 文件
import Vue from 'vue';
import Vuex from 'vuex';
import getters form './getters.js';
// 多模块引入
import user from './modules/user.js'
Vue.use(Vuex);
const store = new Vuex.Store({ //可以简写为: export default new Vuex.....
  getters,
  modules: {
    // 多模块使用
    user
  },
})

// Vuex 引入
// 创建 src -> store -> index.js 文件
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({ //可以简写为: export default new Vuex.....
  // 在 state 中存放全局数据, 相当于组件中的 data
  state: {},
  // 统一的 计算 都放到 getters 内使用(computed), getters 不会修改数据，他只是做到 return 计算数值
  getters: {},
  // mutilation内的方法为同步方法
  // 只有 mutations 才可以让 Vue devtools Vuex内的state改变
  // mutations相当于组件中的methods，但是它不能使用异步方法（定时器、axios）
  mutations: {},
  // actions是专门用来处理异步的, 但实际修改状态值的还是mutations
  actions: {},
})