vuex store笔记

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

import UserModule from './module/user';

Vue.use(Vuex);

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: {
    name: 'name default',
  },
  getters: {
    getName(state) {
      return state.name;
    },
  },
  mutations: {
    // set
    setName(state, val) {
      state.name = val;
    },
  },
  actions: {
    actionDemo(context) {
      context.commit('setName', 'actionsDemo');
      console.log('actionDemo');
    },
    actionDemo1({ commit }) {
      commit('setName', 'commit actionDemo1');
    },
    actionDemo2({ commit }, val) {
      commit('setName', val);
    },
  },
  modules: {
    UserModule,
  },
});

store/module/user.js

export default {
  namespaced: true,
  state: {
    userName: 'andy',
  },
  getters: {
    getUserName(state) {
      return state.userName;
    },
  },
  mutations: {
    setUserName(state, val) {
      state.userName = val;
    },
  },
  actions: {
    userModuleAction({ commit }) {
      commit('setUserName', 'userModuleAction');
    },
    userModuleAction1({ commit }, val) {
      commit('setUserName', val);
    },
  },
};

test.vue

<template>
  <div id="app">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div> -->
    <h1>Demo - 1</h1>
    <h3>Name : {{ name }}</h3>
    <h3>getters Name: {{ gettersName }}</h3>
    <button @click="setName">SET NAME</button>

    <h1>Demo - 2 - modules</h1>
    <h3>user name: {{ userName }}</h3>
    <button @click="setUserName">SET USER MODULE NAME</button>

    <h1>Demo - 3 - mapState</h1>
    <h3>name: {{ msName }}</h3>
    <h3>user name: {{ msUserName }}</h3>

    <h1>Demo - 4 - mapMutations</h1>
    <button @click="mpSetName('valll')">mpSetName</button>
    <button @click="mpSetUserName('valll')">mpSetUserName</button>

    <h1>Demo - 5 Actions / mapActions</h1>
    <h3>Actions</h3>
    <button @click="actionsDemo()">actionsDemo</button>
    <button @click="actionsDemo1()">actionsDemo1</button>
    <button @click="actionsDemo2()">actionsDemo2</button>
    <button @click="userActionDemo()">userActionDemo</button>
    <button @click="userActionDemo1()">userActionDemo1</button>

    <h3>mapActions</h3>
    <button @click="mpActionDemo()">actionsDemo</button>
    <button @click="mpActionDemo1()">actionsDemo1</button>
    <button @click="mpActionDemo2('mpActionDemo2')">actionsDemo2</button>
    <button @click="mpUserActionDemo()">mpUserActionDemo</button>
    <button @click="mpUserActionDemo1('mpUserActionDemo1')">
      mpUserActionDemo1
    </button>

    <h3>函数调用 map 系列</h3>
    <button @click="test()">TEST</button>

    <!-- <router-view /> -->
  </div>
</template>

<script>

import { mapState, mapMutations, mapActions } from 'vuex';

export default {
  name: 'App',
  data() {
    return {

    };
  },
  computed: {
    name() {
      return this.$store.state.name;
    },
    gettersName() {
      return this.$store.getters.getName;
    },
    userName() {
      return this.$store.state.UserModule.userName;
    },
    ...mapState({
      msName: (state) => state.name,
      msUserName: (state) => state.UserModule.userName,
    }),
  },
  methods: {
    ...mapMutations({
      mpSetName: 'setName',
      mpSetUserName: 'UserModule/setUserName',
    }),
    setName() {
      this.$store.commit('setName', 'hello');
    },
    setUserName() {
      this.$store.commit('UserModule/setUserName', 'userNameVaule');
    },
    actionsDemo() {
      this.$store.dispatch('actionDemo');
    },
    actionsDemo1() {
      this.$store.dispatch('actionDemo1');
    },
    actionsDemo2() {
      this.$store.dispatch('actionDemo2', 'actinDemo2');
    },
    userActionDemo() {
      this.$store.dispatch('UserModule/userModuleAction');
    },
    userActionDemo1() {
      this.$store.dispatch('UserModule/userModuleAction1', 'userModuleAction1');
    },
    ...mapActions({
      mpActionDemo: 'actionDemo',
      mpActionDemo1: 'actionDemo1',
      mpActionDemo2: 'actionDemo2',
      mpUserActionDemo: 'UserModule/userModuleAction',
      mpUserActionDemo1: 'UserModule/userModuleAction1',
    }),
    test() {
      const str = 'this is test() run';
      this.mpUserActionDemo1(str);
      console.log(str);
    },
  },
};
</script>