Vue入门（十）---- vuex

简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex分为三大部分：
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
以下是vuex官网提供的的示意图：

一、初始化

vue init webpack-simple 文件名
cd 文件名
npm install
npm install vuex -D // 安装vuex
npm run dev

二、在src创建store.js

// 引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

// state 管理数据
const state = {
    count: 10,
};
// mutations 处理数据变化
const mutations = {
    increment: (state) => {
        state.count++;
    },
    decrement: (state) => {
        state.count--;
    }
};
// actions 处理要做什么，异步请求，判断，流程控制
const actions = {
    increment: ({commit}) => {
        commit('increment')
    },
    decrement: ({commit}) => {
        commit('decrement')
    },
    clickOdd: ({commit, state}) => {
        if (state.count % 2 == 0){
            commit('increment')
        }
    },
    clickAsync: ({commit}) => {
        new Promise((resolve) =>{
            setTimeout(function() {
                alert(1);
            }, 1000);
        })
    }
};

const getters = {
    count: state => {
        return state.count;
    },
    getOdd: state => {
        return state.count%2 == 0? "偶数": "奇数";
    }
}

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

三、main.js引用

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

new Vue({
  store,
  el: '#app',
  render: h => h(App)
})

四、App.vue

<template>
  <div id="app">
    <h3>Welcome vuex</h3>
    <input type="button" value="增加" @click="increment">
    <input type="button" value="减少" @click="decrement">
    <input type="button" value="偶数才能点击+" @click="clickOdd">
    <input type="button" value="点击异步" @click="clickAsync">
    <div>
      现在的数字为：{{count}}, 他现在是{{getOdd}}
    </div>
  </div>
</template>

<script>
 // mapAction 管理事件
 // mapGetters 获取数据
import {mapGetters, mapActions} from 'vuex'
export default {
  computed: mapGetters([
    'count',
    'getOdd',
  ]),
  methods: mapActions([
    'increment',
    'decrement',
    'clickOdd',
    'clickAsync'
  ])
}
</script>

<style>

</style>

官方推荐使用这样的目录结构

|--src
   |--store
      |--index.js      //
      |--types.js      // state数据
      |--mutations.js  // mytations
      |--actions.js    // actions
      |--getter.js     // 获取数据

index.js

// 引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);
// 引入actions和mutations
import actions from './actions'
import mutations from './mutations'
import getters from './getters'

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

types.js

export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

mutations.js

import {
    INCREMENT,
    DECREMENT
} from './types'
const state = {
    count: 20
};

const mutations = {
    [INCREMENT]: (state) => {
        state.count++;
    },
    [DECREMENT]: (state) => {
        state.count--;
    }
};
export default {
    state,
    mutations
}

actions.js

import * as types from './types'
export default {
    increment: ({commit}) => {
        commit(types.INCREMENT);
    },
    decrement: ({commit}) => {
        commit(types.DECREMENT);
    },
    clickOdd: ({commit, state}) => {
        if (state.mutations.count % 2 == 0) {
            commit(types.INCREMENT);
        }
    },
    clickAsync: ({commit}) => {
        new Promise((resolve) => {
            setTimeout(function() {
                commit(types.INCREMENT)
            }, 1000)
        })
    }
}

getter.js

export default {
    count: (state)=> {
        return state.count;
    },
    getOdd: (state)=> {
        return state.count % 2 == 0 ? "偶数": "奇数";
    }
}

App.vue不用变，只需改动main.js的引用

import store from './store/'

Vue入门（十）---- vuex

简介

猜你喜欢