Vuex 的简单应用

1、Vuex 是什么？

Vuex 是一个专为 Vue 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2、Vuex 的固定格式

通过npm安装Vuex ：npm install vuex

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const state = {

},
const mutations = {

},
const actions = {

},
const getters = {

},

export default new Vuex.Store（{
    state, //状态对象
    mutations,//包含多个更新state函数的对象
    actions, //包含多个对应事件回调函数的对象
    getters //包含多个getter计算属性函数的对象
}）

3、Vuex 的简单应用

3.1、Vuex 的简单应用

3.1.1、思路

安装vue，在src根目录下新建stroe.js文件，将vuex的内容都写在里边。

3.1.2、main.js 里引入

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

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store //把 store 的实例注入所有的子组件,且子组件能通过 this.$store 访问到.
})

3.1.3、组件代码

<template>
    <div class="test_box">
      <p>数值： {{$store.state.count}} ，奇偶性：{{evenOrAdd}} </p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <button @click="incrementIfAdd">偶数加</button>
      <button @click="incrementIfReduce">奇数加</button>
      <button title="异步：延时2s后执行" @click="incrementAsync">异步</button>
    </div>
</template>

<script>
  import {mapState,mapActions,mapGetters} from "vuex"
    export default {
        name: "testVuex",
      computed:{
        ...mapState(['count']),//返回值：{count(){return this.$store.state['count']}}
        ...mapGetters(['evenOrAdd']), //返回值：{evenOrAdd(){return this.$store.getters['evenOrAdd']}}
      },
      methods:{
        ...mapActions(['increment','decrement','incrementIfAdd','incrementIfReduce','incrementAsync']),
      },
    }
</script>

<style scoped lang="stylus">
  .test_box
    max-width 300px
    margin 100px auto
    line-height 40px
    text-align center
    button
      padding 5px 10px
      cursor pointer
</style>

3.1.4、store.js内容

/*
 * Vuex 核心管理对象模块
 */
import Vue from "vue"
import Vuex from "vuex"

//声明   使用   安装
Vue.use(Vuex)

// 状态对象
const state = {//初始化状态
  count : 0,
};
//包含多个更新state函数的对象
const mutations = {
  // 增加mutations
  add(state){
    state.count++
  },
  //减少mutations
  reduce(state){
    if(state.count > 1){
      state.count--
    }else {
      state.count = 0;
    }
  },
  add_even(state){
    state.count = state.count + 2;
  },
  add_uneven(state){
    state.count = state.count + 3;
  }
};
//包含多个对应事件的回调函数的对象
const actions = {
  //增加
  increment({commit}){
    //提交增加的mutations
    commit('add');
  },
  //减少
  decrement({commit}){
    //提交减少的mutations
    commit('reduce');
  },
  //带条件的增加
  incrementIfAdd({commit}){
    //提交增加的mutations
    if(state.count %2 ===0){
      commit('add_even');
    }
  },
  //带条件的减少
  incrementIfReduce({commit}){
    //提交减少的mutations
    if(state.count %2 === 1){
      commit('add_uneven');
    }
  },
  incrementAsync({commit}){
    // 在action中直接就可以执行异步操作
    setTimeout(()=>{
      //提交增加的mutations
      commit('add');
    },2000)
  }
};
//包含多个get特然计算属性函数的对象
const getters = {
  evenOrAdd(state){
    return state.count % 2 ===0 ? '偶数' : '奇数'
  }
};

export default new Vuex.Store({  //Store 此处首字母大写
  state, //状态对象
  mutations,//包含多个更新state函数的对象
  actions, //包含多个对应事件回调函数的对象
  getters //包含多个getter计算属性函数的对象
})

3.2、Vuex 在真实项目中的使用

为了更好、更简单、模块化的使用，vuex的四个状态管理应该写开，有利于代码的管理，不然如果按照上面的stroe.js里的写法，会导致这个文件可能会变得很大。

3.2.1、文件目录格式

index.js 是入口文件。
mutations_type.js 是所有mutations的常量名称，目的是用来和actions里的方法名相同。

3.2.2、main.js 里引入

import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store/index"  

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store //把 store 的实例注入所有的子组件,且子组件能通过 this.$store 访问到.
})

3.2.3、组件代码

<template>
    <div class="test_box">
      <p>数值： {{$store.state.count}} ，奇偶性：{{evenOrAdd}} </p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <button @click="incrementIfAdd">偶数加</button>
      <button @click="incrementIfReduce">奇数加</button>
      <button title="异步：延时2s后执行" @click="incrementAsync">异步</button>
    </div>
</template>

<script>
  import {mapState,mapActions,mapGetters} from "vuex"
    export default {
        name: "testVuex",
      computed:{
        ...mapState(['count']),//返回值：{count(){return this.$store.state['count']}}
        ...mapGetters(['evenOrAdd']), //返回值：{evenOrAdd(){return this.$store.getters['evenOrAdd']}}
      },
      methods:{
        ...mapActions(['increment','decrement','incrementIfAdd','incrementIfReduce','incrementAsync']),
      },
    }
</script>

<style scoped lang="stylus">
  .test_box
    max-width 300px
    margin 100px auto
    line-height 40px
    text-align center
    button
      padding 5px 10px
      cursor pointer
</style>

3.2.4、store文件里对应模块详情

（1） index.js

/*
 * vuex 入口文件
 */

import Vue from "vue"
import Vuex from "vuex"
import state from "./state"
import mutations from "./mutations"
import actions from "./actions"
import getters from "./getters"

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

（2） state.js

/*
 *  状态管理
 */
export default {
  count:0,
}

（3） mutations.js

/*
 * 包含多个actions触发去直接更新状态的方法的对象
 */
//引入常量模块
import {ADD,REDUCE,ADD_EVEN,ADD_UNEVEN} from "./mutations_type";

export default {
  ADD(state){
    state.count++
  },
  //减少mutations
  REDUCE(state){
    if(state.count > 1){
      state.count--
    }else {
      state.count = 0;
    }
  },
  ADD_EVEN(state){
    state.count = state.count + 2;
  },
  ADD_UNEVEN(state){
    state.count = state.count + 3;
  }
}

（4）actions.js

import state from "./state"
//引入常量模块
import {ADD,REDUCE,ADD_EVEN,ADD_UNEVEN} from "./mutations_type"
export default {
  //增加
  increment({commit}){
    //提交增加的mutations
    commit('ADD');
  },
  //减少
  decrement({commit}){
    //提交减少的mutations
    commit('REDUCE');
  },
  //带条件的增加
  incrementIfAdd({commit}){
    //提交增加的mutations
    if(state.count % 2 ===0){
      commit('ADD_EVEN');
    }
  },
  //带条件的减少
  incrementIfReduce({commit}){
    //提交减少的mutations
    if(state.count % 2 === 1){
      commit('ADD_UNEVEN');
    }
  },
  incrementAsync({commit}){
    // 在action中直接就可以执行异步操作
    setTimeout(()=>{
      //提交增加的mutations
      commit('ADD');
    },2000)
  }
}

（5） mutations_type.js

/*
 * 所有mutations的常量名称，用来和actions里的相同
 */

export const ADD = 'add' ;//增加
export const REDUCE = 'reduce' ;//减少
export const ADD_EVEN = 'add_even' ;//偶数---增加
export const ADD_UNEVEN = 'add_uneven' ;//技术---增加

（6） getters.js

export default {
  evenOrAdd(state){
    return state.count % 2 ===0 ? '偶数' : '奇数'
  }
}

4、最后附上一张vue和vuex的关系图

图文解释，参考资料

5、致谢