Vuex基本用法

Vuex的作用

• 集中管理数据，任何组件都可以存取仓库中的数据

Vuex流程与Vue类比

const app = new Vue({
    data:{},
    methods:{},
    computed:{}
})

const store = new Vuex.Store({
    state:{},
    mutation:{},
    actions:{},
    getters:{}
})

看一下简单的vue响应式的例子

• 视图通过点击事件，触发methods中的方法->更改data中的count值->count值发生变化，computed中的函数能够把值更新到视图

<button @click="increase">{{getCount}}</button>

// Vuex中的state,储存数据
data(){
  count:0
},

//Vuex中的mutation,更改数据
methods:{
  increase(){
    this.count++
  }
},

//Vuex中的getters,获取数据
computed:{
  getCount(){
    return this.count
  }
}

视图通过点击事件，触发mutation中的方法，更改state中的数据，一旦数据发生改变，getters把数据反映到视图中。

• 通过dispatch可以触发actions中的方法，actions中的commit可以触发mutation中的方法

我们来看Vuex的示例，来实现vue的同样功能

• store->index.js

const store = new Vuex.Store({
    //存储数据
    state:{
        count:0
    },
    
    //state的数据只能通过mutation来修改
    mutations:{
        increaseMutations(state){
            state.count++
        }
    },
    
    //this.$store.commit('increase')来触发mutations中的函数increase
    actions:{
        increaseActions({commit}){
            commit('increaseMutations')
        }
    },
    
    //通过getters中的方法来获取state值
    getters:{
        getCount(state){
            return state.count
        }
    }
})

export default store;

• App.vue

<div>
    <button @click="increaseClick">增加</button>
    {{this.$store.getters.getCount}}
</div>

<script>
export default{
    methods:{
        increaseClick(){
            //this.$store.dispatch('increaseActions')触发actions函数‘increaseActions’
            this.$store.dispatch('increaseActions')
        }
    }
}
</script>

• main.js

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

//关闭生产环境下给出的提示
Vue.config.productionTip = false

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

总结

• state:存储数据
• mutations:通过commit改变state中的数据
• actions:通过dispatch触发mutation中的函数
• getters:通过this.$store.getters.方法名,获取state中的值

模块化管理

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)

// you donot need `import app from './modules/app'`
// it will auto require all vuex module from modules file

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

console.log('big boss', modules)

const store = new Vuex.Store({
  modules,
  getters
})
export default store