Vuex的简单例子

Vuex的简单例子

不包含modules部分，待更新..

目录解构：
.

App.vue

<template>
  <div>
    <Count></Count>
  </div>
</template>

<script>
import Count from "@/components/count.vue";
export default {
  components: { Count }
};
</script>

<style>
</style>

count.vue

<template>
  <div>
    <h3>{{count}}</h3>
    <p>
      <button @click="add(10)">add(10)</button>
      <button @click="replaceAdd(10)">replaceAdd(10)</button>
      <button @click="reduce">-</button>
      <button @click="add2">add2</button>
      <button @click="actionReduce">actionReduce-</button>
      <button @click="actionReduce2">actionReduce2-</button>
    </p>
    <hr>

    <p>
      设置show:
      <button @click="showh3">true</button>
      <button @click="hiddenh3">false</button>
    </p>
    <h3 v-if="show">Vuex状态show控制是否显示</h3>
  </div>
</template>
<script>
// 引入辅助函数
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
export default {
  // 数据
  data() {
    return {};
  },

  // 计算属性 每次值发生改变则重新计算 并更新DOM
  computed: {
    // 扩展运算符 引入state值
    ...mapState(["count", "show"]) // 直接取得`state`
    // 扩展运算符 引入经过过滤器的 `state`, 也可以映射改个名字 `...mapGetters({name:"count"})`, 例如`methods`的`replaceAdd()`
    // ...mapGetters(["count", "show"])  // 通过 `getters` 取得 `state`
  },

  //方法
  methods: {
    // 扩展运算符 引入方法
    //使用 `this.$store.commit('xxx','param')`  或者  映射为methods
    ...mapMutations(["add", "reduce"]), 
    ...mapMutations({
      replaceAdd: "add" // 将 `this.replaceAdd()` 映射为 `this.$store.commit('increment')`
      // amount: 10 假如有第二个参数
    }),

    // 扩展运算符 引入行动
    // 异步执行 每个方法返回Promise
    // 使用this.$store.dispatch("xxx", "param"); 或者  映射为methods
    ...mapActions(["actionReduce2", "actionReduce"]), // 转为两个方法`actionReduce2`和`actionReduce`



    // 自定义局部Mutations方法(操作 `state` 的方法)
    // `this.$store.state` -> 不加$不好用
    add2() {
      // count += 2
      this.$store.state.count += 2;
    },
    // 设置全局状态show为true
    showh3() {
      this.$store.state.show = true;
    },
    // 设置全局状态show为false
    hiddenh3() {
      this.$store.state.show = false;
    }
  }
};
</script>

store.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
/**
 * 定义状态 -> Vuex store 实例的根 state 对象
 * 取状态：
 *    1.通过vuex引入mapState
 *    import { mapState } from "vuex";
 *
 *    2.通过mapState引入两个状态
 *    computed中->  ...mapState(["count","show"])
 */
const state = {
  count: 0,
  show: true
};

/**
 * 定义方法(突变)
 * 第一个值为state 第二个参数payload荷载(可选)
 * mutation 都是同步事务 一个一个执行
 * 调用方法: ...mapMutations(["add", "reduce"])
 * 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation??????
 */
const mutations = {
  add(state, num) {
    state.count += num;
  },
  reduce(state) {
    state.count--;
  }
};

/**
 * 定义动作
 * @param:context 包含以下属性
 *            state,      // 等同于 `store.state`，若在模块中则为局部状态
 *            rootState,  // 等同于 `store.state`，只存在于模块中
 *            commit,     // 等同于 `store.commit`
 *            dispatch,   // 等同于 `store.dispatch`
 *            getters,    // 等同于 `store.getters`
 *            rootGetters // 等同于 `store.getters`，只存在于模块中
 * @param:payload 荷载(可选)
 * 方法dispatch返回Promise
 * async / await???https://tc39.github.io/ecmascript-asyncawait/
 */
const actions = {
  actionReduce(context) {
    context.commit("reduce");
  },
  // `ES2015`写法
  actionReduce2({ commit }) {
    commit("reduce");
  }
};

/**
 * 定义Getters(特定的全局过滤器)
 * 通过store.getters.count方式获取每次都会加1000
 */
const getters = {
  count: state => state.count,
  show: state => state.show,
  //使用其他getters作为第二个参数
  count2: (state, count) => count

  // 过滤 store.getters.doneTodes  就是过滤后的结果
  // doneTodos: state => {
  //   return state.todos.filter(todo => todo.done);
  // }
  //寻找 store.getters.getTodoById(2) 返回id为2的结果
  // getTodoById: (state) => (id) => {
  //   return state.todos.find(todo => todo.id === id)
  // }
};

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
});

main.js

import Vue from "vue";
import App from "./App.vue";
import store from "./vuex/store";
import Vuex from "vuex";
Vue.use(Vuex);

Vue.config.productionTip = false;

new Vue({
  store, //从跟组件注入`Vuex.Store`
  render: h => h(App)
}).$mount("#app");