vuex使用方法超详细讲解(实用)

npm install vuex --save
yarn add vuex

import store from './store';

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

const state = {
  count: 0 // 数量
};

const mutations = {
  SET_COUNT: (state, data) => {
    state.count++;
  }
};
const actions = {};

export default {
  state,
  mutations,
  actions
};

const state = {
  name: 0, // 姓名
  age: 0, // 年龄
};

const mutations = {
  SET_NAME: (state, data) => {
    state.name = data;
  },
  SET_AGE:(state, data) => {
  	state.age = data;
};
const actions = {};

export default {
  state,
  mutations,
  actions
};

const getters = {
  count: state => state.form.count,
  name: state => state.user.name,
  age: state => state.user.age
}
export default getters

import Vue from 'vue'
import Vuex from 'vuex'
import form from './modules/form'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    form,
    user
  },
  getters
})

export default store

import { mapGetters } from "vuex";

computed: {
  ...mapGetters(["count"]),
},

this.$store.commit("SET_COUNT");

this.$store.commit("SET_NAME", '张三');
this.$store.commit("SET_AGE", 20);