111

Posted 2021-02-13 friday69

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了111相关的知识，希望对你有一定的参考价值。

一、什么是Vuex?

官方解释： Vuex是一个专为Vue.js应用程序开发的状态管理模式

当项目比较庞大的时候，每个组件的状态比较多，为了方便管理，需要把组件中的状态抽取出来，放入Vuex中进行统一管理。

当我们需要构建一个中大型的单页面应用程序是，Vuex可以更好的帮助我们在组件外部统一管理状态。

二、Vuex的核心概念

1. 5个核心概念

State

唯一的数据源：我们需要把任何一个组件中需要抽取出来的变量放入到state中去
只要把store注册到app.js中，所有组件都可以使用其中的状态

const Counter = {
    template:  `<p>{{total}}</p>`,
    computed:  {
           total(){
                 return  this.$store.state.total 
           } 
    }
}

Getters

通过Getters可以派生出一些新的状态

//  创建一个Vuex的实例
const  store = new Vuex.Store({
       state: {
            goods: [
                  {id: 1, name: '....',  show: true},
                  {id: 2, name: '....',  show: false}， 
                  .......
             ]     
       },
       getters: {
             showGoods: state => {
                    return state.goods.filter(good => good.show);  
             } 
       }    
});

Mutations

更改Vuex的store中的状态的唯一方法时提交mutation

const store = new Vuex.Store({
     state: {
         total: 1
      }，
      mutations: {
           add (state){
                // 更改状态
               state.total++;  
           } 
      }
});

//调用： 
store.commit('add')；

Actions

Action提交的是mutation，而不是直接变更状态，

Action可以包含任何的异步操作, 但mutation必须是同步操作，即所有的异步操作都写在Action里

const store = new Vuex.Store({
     state: {
         total: 0
      }，
      mutations: {
           add (state){
                // 更改状态
               state.total++;  
           } 
      }，
      actions: {
           add(context){
                 context.commit('add');
           }
      }
});

Modules

面对复杂的应用程序，当管理的状态比较多时，我们需要将Vuex的store对象分割成多个模块(modules)

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

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

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