vue笔记（六）使用vuex

这里通过一个实例，来描述vuex的mapState ， mapGetters ， mapActions 

这里使用 Element UI  官网地址：http://element-cn.eleme.io/#/zh-CN/component/select

一、使用 Element UI 给出的demo，选择其一拷贝到本地项目

二、修改demo，得到如下：

    <div>
      <span>测试vuex</span>
      <template>
        <el-select v-model="optionValue" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.name"
            :label="item.name"
            :value="item.age">
          </el-option>
        </el-select>
      </template>
    </div>

optionValue是当前选中的值，options是所有下拉值的集合，这里是数组格式

三、js代码内引用vuex，methods内声明需要的mapActions ，computed内声明需要使用的mapState 和 mapGetters

<script>
  import { mapGetters, mapState,mapActions } from 'vuex'
    ......

methods: {
      ...mapActions('cache', ['updatePeople']),
    ......

computed:{
      author(){
        return this.$store.state.author
      },
      ...mapGetters('cache', ['avaliableMan']),
      ...mapState('cache', {
        allPeople: state => state.people
      }),
    }

mapActions 声明调用哪个模块文件，以及使用这个文件内的哪个action

mapState 声明调用哪个模块文件，以及使用这个文件内的哪个state

mapGetters 声明调用哪个模块文件，以及使用这个文件内的哪个getter

注：模块文件，用词可能不太准确，指 store 的各个子文件，意会即可

四、将 store 模块化，即上方提到的调用哪个模块文件

store.js

/*
  Vuex 应用的状态 state 都应当存放在 store.js 里面，Vue 组件可以从 store.js 里面获取状态，
  可以把 store 通俗的理解为一个全局变量的仓库。
  但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新。
*/
import Vue from 'vue'
import Vuex from 'vuex'
//可以把store根据功能模块进行分割
import cache from './modules/cache'

Vue.use(Vuex)

const store = new Vuex.Store({
  //声明分割的模块
  modules:{
    cache
  },
  // 定义状态
  state: {
  },
  mutations:{
  },
  actions: {
  }

})

export default store

cache.js

export default {
  //开启，调用时加模块名，例如...mapGetters('cache', ['avaliableMan']) 的cache即模块名字
  namespaced: true,
  state: {
    people:[]
  },
  //getter内的方法以state作为参数，即上方定义的属性都可以操作
  getters:{
    //filter过滤，例如这里过滤了people的值，getter方法将得到过滤结果为true的值
    avaliableMan (state) {
      return state.people.filter(item => {
        return item.sex === '1'
      })
    },
    avaliableWoman (state) {
      return state.people.filter(item => {
        return item.sex === '0'
      })
    },
    //添加过滤条件，这里为性别，可以用来完成级联查询
    filterSex: state => (sex) => {
      if (!sex) {
        return state.people.filter(item => {
          return true
        })
      } else {
        return state.people.filter(item => {
          return item.sex == sex
        })
      }
    }
  },
  //只能在这里改变state数据
  mutations: {
    setPeople (state, data) {
      state.people = data
    }
  },
  actions: {
    initCache ({commit, dispatch}) {
      // 查询测试用户
      dispatch('updatePeople')
    },
    updatePeople ({commit}) {
      // 可以使用ajax获取缓存数据，这里仅为测试，使用静态数据
      let result={
        people:[
          {name:'张三',age:'20',sex:'1'},
          {name:'李四',age:'22',sex:'0'},
          {name:'王五',age:'21',sex:'1'}
          ]
      }
      //使用 store 内置的 commit 来提交到 mutations 内的方法，达到修改数据的目的。前者为方法名，后者为数据参数
      commit('setPeople', result.people)
    },
  }
}

前者为主文件，后者为各个子模块的示例代码

五、使用，测试

在 methods 内加赋值方法

      getOption:function () {
        // this.options=this.allPeople
        // this.options=this.avaliableMan
        this.options=this.filterSex('0')
      }

在 mounted 内调用对应方法，用于初始化

    mounted(){
      this.updatePeople()
      this.getOption()
    }

这样整体流程即，加载页面至 mounted 环节，调用updatePeople方法获取 cache模块的 people 属性值，调用getOption方法将值赋给 options 用来展示下拉数据。在getOption内可以指定是使用原state数据，还是过滤后的state数据。