探究VueX

VueX

Vuex 核心概念

状态管理模式，集中式存储管理：Vuex其实就是一个针对Vue项目设计的状态机，相当于把需要共享的变量存储在状态机中(store），然后将这个状态机挂在根组件中（绑在vue实例上）使用。

State

state是状态在机中状态的集合，相当于对象的属性集合，用来存储状态态。

Getter

getter属于派生状态，是store中的计算属性。getter的返回值会根据它的依赖被缓存起来，并且只用当它的依赖的state值发生改变才会被重新计算。

state :{
        name:'VueX的使用：',
        count:0

    },
getters:{
        splicing:state => {//这里的state对应着上面这个state
            return state.module_one.name + state.module_one.count;
        }
    },

Actions

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。异步操作mutation

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：


state :{

        name:'VueX的使用：',
        count:0

    },

mutations:{
        increase(state){//这里的state对应着上面这个state
            state.module_one.count++;
            //你还可以在这里执行其他的操作改变state
        },

        reduce(state){
            state.module_one.count--;
        }
    },

你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type调用 store.commit 方法：

this.$store.commit('increment');

Module

由于使用单一store，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

Vuex的应用

业务简单的项目

使用

<template>
    <div>
        <div @click="clickAction('increase')">increase</div>
        <div @click ="clickAction('reduce')">increase</div>
        <label>{{conunt}}</label>
        <label>{{splicingString}}</label>
    </div>
</template>

<script>
    export default {

        data () {

            return {

                conunt:'',
                splicingString:''
            }
        },
        
    }
    
    methods:{
       clickAction (flag) {

         if (flag == 'increase') {
//            this.$store.commit('increase');
              this.$store.dispatch('changeAsyn');
           }else {
              this.$store.commit('reduce');
           }
           this.conunt =  this.$store.state.count;
           this.splicingString = this.$store.getters.splicing;

        }

     }

</script>

index.js （简单的项目）

store目录中创建index.js文件，在此文件中创建状态机

import Vue from 'vue'
import vuex from 'vuex'
import module_one from './module-one'
Vue.use(vuex);


export default new vuex.Store({

    state :{
        name:'VueX的使用：',
        count:0

    },

    mutations:{
        increase(state){//这里的state对应着上面这个state
            state.module_one.count++;
            //你还可以在这里执行其他的操作改变state
        },

        reduce(state){
            state.module_one.count--;
        }
    },

    getters:{
        splicing:state => {//这里的state对应着上面这个state
            return state.module_one.name + state.module_one.count;
        }
    },

    actions:{

        changeAsyn(context) {
            setTimeout(() => {
                context.commit('increase');
            }, 1000);
        }

    }


})

业务复杂的项目

目录结构（官方推荐）

├── index.html
├── main.js
├── components
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── state.js          # 跟级别的 state
    ├── getters.js        # 跟级别的 getter
    ├── mutation-types.js # 根级别的mutations名称（官方推荐mutions方法名使用大写）
    ├── mutations.js      # 根级别的 mutation
    ├── actions.js        # 根级别的 action
    └── modules
        ├── m1.js         # 模块1
        └── m2.js         # 模块2

store.js

const state = {
    name:'Hello VueX',
    count:0
};
export default state;

getters.js

export default {
    name:state => state.name;
    count:state => state.count;
    splicing:state => {
        return state.name + state.count;
   }
}

or

export const name = (state) => {
    return state.name;
}

export const count = (state) => {
    return state. count
}

export const splicing = (state) => {
    return `My name is ${state.name}, I am ${state.count}.`;
}

mutation-type.js

我们会将所有mutations的函数名放在这个文件里）：

export const SET_NAME = 'SET_NAME';
export const SET_COUNT = 'SET_COUNT';

mutations.js

import * as types from './mutation-type.js';

export default {
    [types.SET_NAME](state, name) {
        state.name = name;
    },
    [types.SET_COUNT](state, count) {
        state.count = count;
    }
};

外部使用：

actions.js

// 异步操作多个commit
import * as types from './mutation-type.js';
export default {
    nameAsyn({commit}, {age, name}) {
        commit(types.SET_NAME, name);
        commit(types.SET_COUNT, age);
    }
};

modules--m1.js


export default {
    state: {},
    getters: {},
    mutations: {},
    actions: {}
};

index.js示例（组装vuex）：

import vue from 'vue';
import vuex from 'vuex';
import state from './state.js';
import * as getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';
import m1 from './modules/m1.js';
import m2 from './modules/m2.js';
import createLogger from 'vuex/dist/logger'; // 修改日志

vue.use(vuex);

const debug = process.env.NODE_ENV !== 'production'; // 开发环境中为true，否则为false

export default new vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
        m1,
        m2
    },
    plugins: debug ? [createLogger()] : [] // 开发环境下显示vuex的状态修改
});

store 挂载到main.js中的vue实例上


import store from './store/index.js';

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

or 

import store from './store/index'
App.vue 文件
export default {
  name: 'app',
    store,//使用store
  components: {
    HelloWorld
  }
}

mapGetters、mapActions、mapMutations

很多时候 , $store.state.dialog.name 、$store.dispatch('nameAsyn') 这种写法又长又臭 , 很不方便 , 我们没使用 vuex 的时候 , 获取一个状态只需要 this.name , 执行一个方法只需要 this. setName 就行了 , 使用 vuex 使写法变复杂了 ?

使用 mapState、mapGetters、mapActions 就是为了简化：$store.state.name 、$store.dispatch('nameAsyn') $store.commit('SET_NAME') 、this.$store.getters.name变成更加简单的方式：如访问 this.name ,this.splicing,this.setName,this.nameAsyn。


import {mapGetters, mapMutations, mapActions} from 'vuex';

/* 只写组件中的script部分 */
export default {
    computed: {
        ...mapGetters([
            name,
            age,
            splicing
        ]),
        
        ...mapState([
                'name'
        ])
    },
    methods: {
        ...mapMutations({
            setName: 'SET_NAME',
            setAge: 'SET_AGE'
        }),
        ...mapActions([
            nameAsyn
        ])
    }
};

参考链接

Vue 官网文档
理解vuex -- vue的状态管理模式
前端框架Vue（4）——vuex 状态管理
vuex最简单、最详细的入门文档

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • vuex 使用说明
    安装 npm npm install vuex --save 在一个模块化的打包系统中，您必须显式地通过Vue.u...
    萧玄辞阅读 8,044评论 0赞 7
  • Vuex 的学习过程记录
    Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 5,342评论 0赞 7
  • vuex 要点 -- 原创
    vuex是一个状态管理模式，通过用户的actions触发事件，然后通过mutations去更改数据（你也可以说状态...
    Ming_Hu阅读 6,205评论 3赞 3
  • 玩烂 Vuex
    Vuex 概念篇 Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式...
    Junting阅读 8,235评论 0赞 43
  • 五绝•山脚偶感
    层翠氤氲绕，峰峦叠影出。 玉锥龙虎卧，灵沁圣人呼。
    醉眼朦胧的鱼阅读 1,603评论 0赞 1

友情链接更多精彩内容