Vuex的详细实现方式

2017-08-19

本文记录一下Veux的实现方式

1、Vuex的基础配置

在src下创建store文件夹和在store文件夹下创建index.js

index.js配置Vuex

import Vue from 'vue'
import Vuex from 'vuex'
//vuex状态日志控制台打印插件
import logger from 'vuex/dist/logger'
Vue.use(Vuex)

//公共数据
const state={
  count:0
};

//对数据进行事件操控
const mutations = {
  //接收组件发起add请求
  add(state,count){
    //state.count ++ ;
    state.count += count
  },
  minus(state){
    state.count --;
  }
}

//导出Store对象
const  store = new Vuex.Store({
    state,
    mutations,
    plugins:[logger()],
    //只能通过mutation（管理员）更改state，mutation不支持异步
    strict:true,
});

export default store

在main.js引用创建的stroe文件夹

//main,js
import store from './store'

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

2、组件发起vuex请求

<template>
    <div>
        <span>计数器</span>
        <button @click="add">增加</button><br/>
        <span >当前</span> {{$store.state.count}} <br/>
        <button @click="minus">减少</button>
    </div>
</template>
<script>
export default {
    data(){
      return {}
    },
    methods: {
      add(){
       //直接向mutations发起add事件
        this.$store.commit('add',2)
      },
      minus(){
        this.$store.commit('minus')
      }
    }
  };
</script>

但是这样单词长一些写错然后就会报错我们可以拥有一个提示效果并且将所有方法统一进行管理，我们接下来创建一个type.js

3、创建type.js 对方法统一管理

type.js

//宏语法一般都是大写
//增加 相当于之前的add方法
    export const INCREMENT = 'INCREMENT'
//减少
    export const DECREMENT = 'INCREMENT'

index.js需要更改的地方

import Vue from 'vue'
import Vuex from 'vuex'
import logger from 'vuex/dist/logger'
Vue.use(Vuex)
//引入type文件
import * as Types from './type'

const state={
  count:0
};

const mutations = {
  [Types.INCREMENT](state,count){
    //state.count ++ ;
    state.count += count
  },
  [Types.DECREMENT](state){
    state.count --;
  }
}

const  store = new Vuex.Store({
  state,
  mutations
});

export default store

4、组件发起vuex请求更改部分

<template>
    <div>
        <span>计数器</span>
        <button @click="add()">增加</button><br/>
        <span>当前</span> {{$store.state.count}} <br/>
        <butto @click="minus">减少</button>
      </div>
    </div>
</template>
<script>
//引入type.js文件
 import * as Types from '../store/type'

 export default {
     methods: {
       add(){
        //直接向mutations发起事件请求
         this.$store.commit(Types.INCREMENT,2)
       },
       minus(){
         this.$store.commit(Types.DECREMENT)
       }
     },
   };
</script>

那么我们想知道是否奇数偶数的时候需要在每个页面计算会很麻烦，接下来我们就在vuex中创建我们的getters
getters
state相当于data
mutations相当于methods
getters 相当于computed

actions 相当于异步操作

//相当于computed 大家公用的
//获取值得方式在页面调用 {{$store.getters.val}}
const getters = {
  val:(state)=>state.count%2?'奇数':'偶数'
};

然后在Store实例上引用getters

const  store = new Vuex.Store({
  state,
  mutations,
  getters,
  plugins:[logger()],
  strict:true // 只能通过mutation(管理员)来更改状态，mutation不支异步
});

可以在任何页面调用getters计算后返回来的值，我们也可以把他变成页面私有的额

在调用的页面引用vuex自带的方法

import { mapActions,mapGetters} from  'vuex'

computed:mapGetters([  //store.js中的getters返回数据
     'val',//获取数据 count
]),

然后再页面调用即可

需要注意的地方

import {mapGetters} from "vuex";
//第一种方法：vuex和组件中使用的shoplist的名称
 computed: {
   ...mapGetters(['shoplist’]) //这是数组['A’,’B’,...]
 },

 //第二种写法，vuex中抛出的shoplist，但用的是shoplistData，
 computed: {
   …mapGetters({
      //换个名字
       shoplistData:'shoplist’  //这是对象
   })
 },

总结：事件触发this.$store.commit直接提交到mutations对state进行处理，需要计算的部分在getters里处理，需要异步处理的时候先this.$store.dispatch到actions做限制处理，通过后在commit到mutations；异步处理先this.$store.dispatch到actions，直接处理的可以直接this.$store.commit到mutations；

直接调用的方式就是this.$store.

也可以引入 import {mapState,mapGetters,mapMutations} from “vuex”;做处理

vuex高级写法

import {mapState,mapMutations} from "vuex"
   methods: {
     //有一个Mutations叫changeCity
     //然后把Mutations映射在这个组件里一个叫changeCity的方法里
     ...mapMutations(['changeCity']),
     handleCityClick(city){
         //等价于 this.$store.commit('changeCity',city);
         this.changeCity(city)
         this.$router.push('/')
     }
   }，
   computed: {
   //数据中直接 this.city就行 等价于 this.$store.state.city
     ...mapState(['city'])
   },

module

正常我们是这种写法

const  store = new Vuex.Store({
  state,
  actions,
  mutations,
  getters
});

但是由于使用单一的状态树，应用的所有对象会集中到一个比较大的对象，store对象就有可能变得臃肿

为了解决以上问题，vuex允许我们将store分割成模块，每个模块都可以拥有自己的state、mutation、action、getter、

//app.js
const app = {
   state:{},
   actions:{},
   mutations:{},
   getters:{}
}
export default app

import app from './modules/app';
const  store = new Vuex.Store({
  modules: {
     app
  }
});
export default store