vuex的基本使用

1、store的实现

// store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
let store = new Vuex.Store({
  state: {
    count1: 0,
    count2: 0,
  },
  getters: {
    total(state) {
      return state.count1 + state.count2;
    },
  },
  mutations: {
    ADD_COUNT1(state, data) {
      state.count1 += data;
    },
    ADD_COUNT2(state, data) {
      state.count2 += data;
    },
  },
  actions: {
    ADD_COUNT_ASYNC({ commit }, data) {
      commit("ADD_COUNT2", data);
      return "提交成功";
    },
  },
  modules: {},
});

export default store;

2、vue中引入store

// main.js
import store from "./store";
import App from "./App"
import Vue from "vue"
new Vue({
 store,
 render: h => h(App),
}).$mount("#apps");

3、vue中使用store

• 使用方式1

<template>
  <div>
   <h1>{{ $store.state.count1 }}</h1>
   <h1>{{ $store.getters.total }}</h1>
  <button @click="handleClick1">mutation</button> 
  <button @click="handleClick2">actions</button>
 </div>

</template> 

<script>
export default {
 methods: {
   handleClick1() {
     this.$store.commit("ADD_COUNT1", 1);
     // this.$store.commit({type: "ADD_COUNT1", num: 1} ) 
     // type为mutations中的方法
     // 此时ADD_COUNT1中获取的data为{type: "ADD_COUNT1", num: 1}这个对象
   },
   handleClick2() {
     this.$store.dispatch("ADD_COUNT_ASYNC", 2).then( res => {
       console.log(res)
     })
   }
 },
}
</script>

• 使用方式2

<template>
  <div>
   <h1>{{ count1 }}</h1>
   <h1>{{ total }}</h1>
  <button @click="handleClick1">mutation</button> 
  <button @click="handleClick2">actions</button>
 </div>

</template> 

<script>
import {mapState, mapActions, mapGetters, mapMutations} from "vuex";
export default {
  computed: {
    ...mapState(["count1"]),
    ...mapGetters(["total"]),
  },
 methods: {
  ...mapMutations(["ADD_COUNT1"]),
  ...mapActions(["ADD_COUNT_ASYNC"]),
   handleClick1() {
    this.ADD_COUNT1(1);
   },
   handleClick2() {
    this.ADD_COUNT_ASYNC(2).then(res => console.log(res))
   }
 },
}
</script>

4、store中使用module时

• module文件

 export default {
  namespace: false, // 一般不用写， 默认为false
  state: {
    num1: 0,
    num2: 0,
  },
  getters: {
    totalNum(state) {
      return state.num1 + state.num2;
    },
  },
  mutations: {
    ADD_NUM1(state, data) {
      state.num1 += data;
    },
    ADD_NUM2(state, data) {
      state.num2 += data;
    },
  },
  actions: {
    ADD_NUM_ASYNC({ commit }, data) {
      commit("ADD_NUM2", data);
      return "提交成功";
    },
  },
};

• store文件

import Vue from "vue";
import Vuex from "vuex";
import module from "./module";
Vue.use(Vuex);
let store = new Vuex.Store({
  state: {...},
  getters: {...},
  mutations:{...},
  actions: {...},
  modules: {
    module1: module,
  },
});

export default store;

• vue文件

<template>
  <div>
   <h1>{{ $store.state.module1.num1 }}</h1>
   <h1>{{ $store.getters.totalNum }}</h1>
  <button @click="handleClick1">mutation</button> 
  <button @click="handleClick2">actions</button>
 </div>

</template> 

<script>
export default {
 methods: {
   handleClick1() {
     this.$store.commit("ADD_NUM1", 1);
   },
   handleClick2() {
     this.$store.dispatch("ADD_NUM_ASYNC", 2).then( res => {
       console.log(res)
     })
   }
 },
}
</script>

5、module的namespace设置为true后

默认情况下，模块内部的 action 和 mutation 仍然是注册在全局命名空间的——这样使得多个模块能够对同一个 action 或 mutation 作出响应。Getter 同样也默认注册在全局命名空间 ， 如果不同模块定义相同的action 、mutation 、getter会导致报错， 此时建议使用namespaced： true,

<template>
  <div>
   <h1>{{ $store.state.module1.num1 }}</h1>
   <h1>{{ $store.getters["module1/totalNum"] }}</h1>
  <button @click="handleClick1">mutation</button> 
  <button @click="handleClick2">actions</button>
 </div>

</template> 

<script>
export default {
 methods: {
   handleClick1() {
     this.$store.commit("module1/ADD_NUM1", 1);
   },
   handleClick2() {
     this.$store.dispatch("module1/ADD_NUM_ASYNC", 2).then( res => {
       console.log(res)
     })
   }
 },
}
</script>
 

对应mapActions, mapGetters, mapMutations, mapState的写法

...mapState('module1', ["num1"])       // 使用时 this.num1
...mapGetters('module1', ["totalNum"])  // 使用时 this.totalNum
...mapMutations("module1",["ADD_NUM1"])  // 使用时 this.ADD_NUM1(1)
...mapActions("module1",["ADD_NUM_ASYNC"]) // 使用时 this.ADD_NUM_ASYNC(2)

注： 更详细的可以在官网vuex.vuejs.org/zh/guide/mo… 中查看