Nuxt使用Vuex的方法示例

index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
import filter from './filter';
Vue.use(Vuex);
const store = () => new Vuex.Store({
 state: {
 },
 mutations: {
 },
 modules: {
  filter
 }
});
export default store

在index.js文件中import一下我们的filter.js文件，然后在modules中引入即可使用

三、在vue文件中使用vuex

index.vue

<template>
 <section class="p-10">
  <h1> {{ value }} </h1>
  <h1> {{ result }} </h1>
  <el-button type="danger" @click="change">点击</el-button>
 </section>
</template>
<script>
 import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
 data() {
  return {
   result: false
  };
 },
 computed: {
  ...mapGetters('filter', [
   'include'
  ]),
  ...mapState({
   value: state => state.filter.value
  })
 },
 methods: {
  ...mapMutations('filter', [
   'SET_VALUE'
  ]),
  ...mapActions('filter', [
   'getInfo'
  ]),
  change() {
   // this.result = this.include(1);
   // this.getInfo('你好');
   // this.SET_VALUE('HELLO');
  }
 },
 mounted() {
 },
 beforeDestroy() {
 }
};
</script>

1.在vue文件中，首先通过import { mapState, mapMutations, mapActions, mapGetters } from ‘vuex’ 来引入我们需要的模块，按需引用，只需要引入本页面用到的模块即可

2.mapGetters和mapState需要在页面的计算属性computed中引入，mapMutations和mapActions需要在methods中引入，此时要注意模块的命名空间，如果vuex文件导出时标注了namespaced，我们使用时也需要写出才可以找到，反之则不需要

3.首先是mapState，使用mapState时，我有两种方法来取，两种方式都可以，这个方法是从store中取出这个变量，然后显示在此页面上，store变动的话，此页面也会跟着动态改变

...mapState({
   value: state => state.filter.value
  })

...mapState('filter', {
   value: state => state.value
  })

4.mapGetters类似于store的计算属性，我们可以通过mapGetters的方法在store里进行计算，然后返回我们需要的结果即可

上面例子就是点击按钮的时候传了一个数字到store里，然后判断store里的list是否包含这个数字，然后返回结果到页面，页面根据返回值重新刷新数据

5.MapMutation是更改store中状态的唯一方法，Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和 一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数