vuex踩坑日志（一）

VUEX踩坑日志

源码地址https://github.com/zhengyixun/VUEX

我使用的是vue-cli+vuex，vue-cli的安装和使用想必就不用我多说了，我这里主要说一下vuex在vue-cli中的使用方法

首先在你的vue-cli下安装vuex

npm install vuex --save--dev

在你的src目录下新建一个Store文件夹，用来存放store.js等等

store
    |+store.js
    |+action.js
    |+mutation.js
    |+state.js
    |+getter.js

每个对应js对应其相应的功能，然后通过export default 暴露出去

State

State负责存储整个应用的状态数据，一般需要在使用的时候在跟节点注入store对象，后期就可以使用this.$store.state直接获取状态

modules

前面说过不论是多大的一个应用，都只有一个store，当应用郭大师store就会变得庞大，为了解决以上的问题，引入modules，可以分割store，每个模块拥有自己的statemutataion action getter等，甚至可以嵌套子模块

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

功能1：组件直接从store中读取某个状态

state.js

const state = {
  msg: '原始数据',
}
export default state;

store.js

import Vue from "vue";
import Vuex from "vuex";
import state from "./state.js";

Vue.use(Vuex)    //这里注意，一定要使用一下

const store=new Vue.Store({
  state
})
export default store;

然后需要在main.js中引用一下

import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store/store.js";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});

在组件中

<template>
    <div class="abc">
        <input type="text" value="abc">
        <div>{{msg}}</div>
        <button>按钮</button>
    </div>
</template>

<script>

//通过this.$store.state.msg

    export default {
        data(){
            return {
                msg:this.$store.state.msg,
            }
        },
    }
</script>

<style scoped>

</style>

功能2：做一个能记录点击次数的功能

首先需要对mutation要有一个了解，mutation是修改store中State的唯一方法，在vuex中mutation是同步事务

mutations.js

const mutation={
    change(state){
        state.count++;
        alert(state.count)
    }
};
export default mutation;

store.js中引入

import Vue from "vue";
import Vuex from "vuex";
import mutations from "./mutation.js";

Vue.use(Vuex);
//定义数据
var state={
  count:0
};


var store=new Vuex.Store({
    state,
    mutations
});
export default store;

同样需要在main.js中挂载

组件中

<template>
    <div class="abc">
        <input type="text"  :value="names">
        <div>{{names}}</div>
        <button @click="clicks">按钮</button>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                names:this.$store.state.names,
            }
        },
        methods:{
            clicks(){
                this.$store.commit("change");
            }
        }
    }
</script>

mutation虽然能修改状态，但是他是同步的有时候满足不了我们的需求，此时就需要action来帮忙

action类似于mutation，但也有不同之处

• action提交的是mutation，不能直接变更状态
• action是异步的

用法如下

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment') //调用mutations里的方法，而不是自己直接修改State
    }
  }
})

功能3：通过getter派生出一个新的State

有些状态需要做二次处理需要使用getter方法

getter.js

const getters={
    arrLength:(state)=>{
        state.arr.length
    }
};
export default getters;

以上代码的意思是通过读取state中arr属性，派生出一个新的属性arrLength

state

var state={
  count:0,
  arr:[1,2,3]
};

store.js和上面的一样

组件

<template>
    <div class="abc">
        <input type="text"  :value="names">
        <div @click="len">{{names}}</div>
        <button @click="clicks">按钮</button>
    </div>
</template>

<script>
    import { mapGetters } from "vuex";
    export default {
        data(){
            return {
                names:this.$store.state.names,
            }
        },
        methods:{
            clicks(){
                this.$store.commit("change");
            },

            len(){
                console.log(this.$store.state)   //这里查看有没有通过gettter方法派生出来新的state
            }
        },
        computed:mapGetters([
            'arrLength'
        ])
    }
    </script>

<style scoped>

</style>