vuex及vuex模块化

1.下载vuex 插件 并使用vuex

vue 2用 vuex 3   vue 3 用 vuex 4
本次已vue 2为主
npm i vuex@3  

2.使用vuex

在 src目录下新建一个 store文件夹 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.store({
//存放数据
state:{
    num:1
},
//对state中的数据进行更改
mutations:{
    add(context, val){  //context ≈ 微型store  val为传来的参数
        context.num += val
    }
},
//调用 mutations中的方法
actions:{
    Add(context, val){
        context.commit('add',val) //调用mutations中的add函数
    }
},
//对state中的数据进行加工 
getters:{
    updateNum(state){
        return state.num += 1 //当依赖值num发生改变后才重新计算
    }
}
})

//向外暴露store
export default store

3.挂载到vue上

import Vue from 'vue'
import App from './App.vue'
//引入
import store from '@/store'

Vue.config.productionTip = false

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

4.在页面中使用

//html部分
<template>
  <div>
    <h1>Home</h1>
    //每次单击 +2
    <div>num:{{num}} <button @click="Add(2)">+</button></div>
  </div>
</template>

//2种使用方式

//js部分 1
<script>
import { mapState,mapActions, mapGetters } from 'vuex'
export default {
    computed:{
        ...mapState(['num']),
    },
    methods:{
        ...mapActions(['Add'])
    }
}
</script>

//js部分 2  不推荐使用 太繁琐 
<script>
export default {
    computed:{
        num(){
            return this.$store.state.num
        }
    },
    methods:{
        Add(val){
            this.$store.dispatch('Add',val)
        }
    }
}
</script>

模块化vuex

index.js

import Vuex from 'vuex'
import Vue from 'vue'

import home from './more/home'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules:{
        home
    },
})

export default store

home.js

const state = {
    abc:10
}
const mutations = {
    add2(context){
        context.abc+=20
    }
}
const actions = {
    Add2(context){
        context.commit('add2')
    }
}
const getters = {
    
}
export default {
    //namespaced:true 开启命名空间
    state,mutations,actions,getters,namespaced:true
}

使用

//html部分
<template>
  <div>
    <h1>Login</h1>
    <div>num:{{num}} <button @click="Add2">+</button></div>
  </div>
</template>
//js部分
<script>
import { mapState,mapActions, mapGetters } from 'vuex'
export default {
computed:{
        //2种方式 
        ...mapState('home',['abc']),//开启命名空间才能使用
        ...mapState({abc:state =>state.home.abc})
    },
    methods:{
        ...mapActions('home',['Add2'])
    },
}
</script>

<style>

</style>