Vue —— Vuex

vuex 插件

• Actions 、Mutations 、State 都是对象 {} ，都由 store 管理
• 必须让所有 vc 看见 store

安装 vuex

• npm i vuex@3 :

  ​ vue2 中只能用 vuex3 版本，vue3 中只能用 vuex4 版本

一、非模块化（ 组件少时 ）

• src 下建 store 文件夹 ，里面放 index.js
  

index.js

//引入Vue 和 Vuex;
import Vue from 'vue';
import Vuex from 'vuex';
//使用插件，必须放在这里
Vue.use(Vuex);

//准备 actions --- 用于响应组件中的动作
const actions = {};

//准备 mutations --- 用于操作数据
const mutations = {};

//准备 state --- 用于存储数据
const state = {};

//可以理解为计算属性
const getters = {}

//创建并导出 Store 
export default  new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

入口函数 main.js

//引入 store 仓库
import store from './store/index'
 
//创建vm
new Vue({
    ...,
    //注册 store(同名可简写)，组件实例身上会多一个 $stroe 属性
    store,
    ...
})

4 个批量生成代码函数

• import {mapState,mapGetters,mapMutations,mapActions} from 'vuex’

非模块化 案例

• Count.vue

<template>
    <div>
        <h1>当前求和为 ：{{sum}}</h1>
        <h2>当前求和放大10倍为 ：{{bigSum}}</h2>
        <h2>我在{{school}} ，学习{{subject}}</h2>
        
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="ADD(n)">+</button>
        <button @click="UNADD(n)">-</button>
        <button @click="addOdd(n)">当前求和为奇数再加</button>
        <button @click="addWait(n)">等一等再加</button>
   </div>
</template>

<script>
	 /* 引入 4 个批量生成代码函数，
		数据 在 computed 里接收,
		方法 在 methods  里接收 	*/
    import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

    export default{  
        name:'Count',
        data(){
            return{
                n:1,    // 用户选择的数字
            }
        },
        computed:{
            /*  ...{x，x，x}表示把{x,x,x}里的元素拆开摆进computed对象里
                对象写法：对象里不能直接套对象
            ...mapState({sum:'sum',school:'school',subject:'subject'})  
                数组写法：前提是生成的计算属性名与state属性名相同     */
            ...mapState(['sum','school','subject']),
            ...mapGetters(['bigSum'])
        },
        methods: {
            //借助mapMutations 生成对应的方法，会调用 commit 去联系 Mutations
            ...mapMutations(['ADD','UNADD']),
            //借助mapActions 生成对应的方法，会调用 dispatch 去联系 Actions
            ...mapActions(['addOdd','addWait']),
        }
    }
</script>

<style scoped>
    button{
        margin-left: 5px;
    }
</style>

• index.js

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

//准备 actions --- 用于响应组件中的动作
const actions = {

    addOdd(context,value){
        if(context.state.sum % 2){
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
        setTimeout(()=>{
            context.commit('ADD',value)
        },500)

        context.commit('ADDWAIT',value)
    }

}

//准备 mutations --- 用于操作数据
const mutations = {
    ADD(state,value){
        state.sum += value
    },
    UNADD(state,value){
        state.sum -= value
    }
}

//准备 state --- 用于存储数据
const state = {
    sum:0 ,  // 当前的和
    school: '清华',
    subject: '技术'
}

//准备 getters（可用可不用） --- 用于将 state 中的数据进行加工,相当于计算属性
const getters = {
    bigSum(state){
        return state.sum*10
    }
}

//使用插件，必须放在这里
Vue.use(Vuex)

//创建并导出 Store 
export default  new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

入口函数 main.js

//引入 store
import store from './store/index'
 
//创建vm
new Vue({
    ...,
    //配置store(同名可简写)
    store,
    ...
})

———————————————————————————————————————————————————————————————

二、模块化（组件多时 ⇒ 小仓库）

• src 下建 store 文件夹 ，建立 主仓库 index.js、以及小仓库们
  

• 小仓库/index.js

//home 模块的小仓库
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default {
    state,
    mutations,
    actions,
    getters
}

• 主仓库/index.js 引入小仓库

//引入 Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'
//使用 vuex 插件
Vue.use(Vuex)
//引入小仓库
import home from './home'
import search from './search'
//对外暴露 store 类实例
export default new Vuex.Store({
    //实现模块化开发存储数据
    modules:{
        home,
        search
    }
})

• 入口函数 main.js

//引入 store
import store from './store/index'
 
//创建vm
new Vue({
    ...,
    //配置store(同名可简写)
    store,
    ...
})