Vuex state,getters,mutations,actions用法

首先在main.js中引入vuex:

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router/index'
import store from './store/index'
//全局使用
Vue.use(ElementUI);

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

store > index.js:

import Vue from 'vue'
import Vuex from 'vuex'
//import menu from './modules/menu'
Vue.use(Vuex)
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
export default new Vuex.Store({
  state,//数据
  getters,//计算属性，可以重新计算state，用法相当于computed
  mutations,//同步函数 要想改变state，得在组件的方法中调用mutations的方法，具体操作写在mutations中
  actions,//提交mutations——可以包括异步如setTimeout一个mutation方法，也可以在里面写条件判断决定提交哪个mutations，sg不能直接变更state
})

组件中使用 > home.vue:

<!--  -->
<template>
  <div>
        <!-- state第一种写法 -->
        <div>{{ $store.state.str }}</div>
        <!-- state第二种写法 -->
        <div>{{ str }}</div>
        <hr />
        <!-- getters 直接使用-->
        <div>{{ setStr }}</div>
        <hr />
        <!-- mutations 在组件的方法中调用-->
        <ul>
          <li
            v-for="item in list"
            :key="item.id"
            @click="mutationBtn(item.name)"
          >
            {{ item.name }}
          </li>
        </ul>
        <div>点击名字后改变state中的username：{{ username }}</div>
        <!-- mutations 直接使用 具体操作写在了mutations.js中-->
        <button @click="reduce">-</button>
        {{ count }}
        <button @click="add">+</button>
        <p>合计：{{ totalPrice }}</p>
        <hr />
        <!-- actions 可根据情况提交mutation-->
        <div>{{ count }}</div>
        <button @click="actionBtn">点击action 直接提交mutation</button>
        <button @click="actionAsync">点击action 异步提交mutation</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "",
  data() {
    return {
    };
  },
  //组件中的计算属性，例如拿到时间戳重新计算时间，使用时不用加()调用，因为是属性
  computed: {
    //state
    ...mapState(["str", "list", "username", "count", "totalPrice"]),
    //getters
    ...mapGetters(["setStr"])
  },
  methods: {
    //mutations 
    ...mapMutations(["changeUsername", "add", "reduce"]),
    //mutations 要想改变state 得在组件的方法中调用mutations的方法 具体操作写在mutations中
    mutationBtn(name) {
      //this.changeUsername(name);//传一个值时
      this.changeUsername({
        //传多个值时
        name: name, //name值为形参
        alertThing: 1,
      });
      this.$store.commit("run"); //此方法在组件中直接通过commit提交
    },
    //actions
    ...mapActions(["addFn", "setCountFn"]),
    actionBtn() {
      //this.addFn();
      this.addFn({
        a: 1,
      });
    },
    actionAsync() {
      this.setCountFn({
        num: 10,
      });
    }
  },
};
</script>

<style scoped>
</style>

页面效果：

 store > state.js

export default {
  str: 'str',
  list: [
    { id: 1, name: 'jue' },
    { id: 2, name: 'jia' },
    { id: 3, name: 'xiong' }
  ],
  username: '',
  count: 1,
  totalPrice: 0
}

store > getters.js

export default {
  setStr(state) {
    return state.str.slice(0, 2)
  }
}

store > mutations.js

export default {
  run() {//此方法在组件中通过commit提交
    alert('run')
  },
  //＊组件中的方法调用此方法
  // changeUsername(state, name) {//传一个值时
  //   state.username = name
  // },
  changeUsername(state, obj) {//传多个值时
    alert(obj.alertThing)
    state.username = obj.name
  },
  //＊组件中直接使用 ＊也在actions.js中通过commit方法提交
  add(state, obj) {//obj从actions来的
    alert(obj.a)
    state.count++
    this.commit('total')//mutations方法中调用其它mutations方法
  },
  //＊组件中直接使用
  reduce(state) {
    state.count--
    this.commit('total')//mutations方法中调用其它mutations方法
  },
  //＊被上面的mutations方法调用
  total(state) {
    state.totalPrice = state.count * 10
  },
  //*在actions.js中通过commit方法提交
  setCount(state, obj) {//obj从actions来的
    state.count += obj.num
  }
}

store > actions.js

export default {
  //条件判断执行哪个mutation
  addFn({ commit }, obj) {
    // if (true) {
    //   commit('add')
    // } else {
    //   commit('reduce')
    // }
    commit('add', obj)//传mutations方法名和从组件中接收到的对象
  },
  //异步调用mutation
  setCountFn({ commit }, obj) {
    setTimeout(() => {
      commit('setCount', obj)//传mutations方法名和从组件中接收到的对象
    }, 1000)
  }
}