vuex状态管理机

最新推荐文章于 2023-05-19 10:31:30 发布

煎饼狗子ing

最新推荐文章于 2023-05-19 10:31:30 发布

阅读量319

点赞数

文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/zy123r/article/details/120771262

版权

1.介绍

Vuex 是专门用来管理vue.js应用程序中状态的一个插件
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex是维护组件之间共享数据的状态机
应用场景：
同级别组件之间通讯

let comA = {}
let comB = {}

vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出，其中action作为数据的输入，state作为数据的输出。如下图：

在这里插入图片描述

vuex里有这么一个规则：
只能在mutaions里修改state，actions不能直接修改state

mutations即变化，修改state的数据，而且只能是同步的，不能存在异步的操作。如果需要异步怎么办呢？把异步操作放在actions里，拿到数据再通过mutations同步处理。vuex做的其实是把职权明确了，责任细分了。所以它文档里也说，小系统可以不用。状态数据少，没有细分的必要。

2.store

2.1创建store

const store = new Vuex.Store({...});

可见，store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象：

1.state – 存放状态

2.getters – state的计算属性

3.mutations – 更改状态的逻辑，同步操作

4.actions – 提交mutation，异步操作

5.mudules – 将store模块化(维护多个仓库)

关于store，需要先记住两点：

1.store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；

2.不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

2.2一个完整的store的结构是这样的

const store = new Vuex.Store({
  state: {
    // 存放状态
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，异步操作
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
   //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});

3.基本使用：

Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态，作为一个“唯一数据源”而存在，这也意味着，每个应用将仅仅包含一个 store 实例。Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用Vue.use(Vuex)），通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store访问到。
1)State(类似于vue实例中data)
存储数据的地方，将每个vue实例中的公共变量抽取出来进行统一管理
另外有些状态是组件私有的状态，称为组件的局部状态，我们不需要把这部分状态放在store中去。

state: {       
      msg: 'hello vuex'
    }

如何在组件中获取vuex状态

由于vuex的状态是响应式的，所以从store中读取状态的的方法是在组件的计算属性中返回某个状态。

import store from 'store';
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      // 获取store中的状态
      return store.state.count;
    }
  }
}

这样，组件中的状态就与store中的状态关联起来了。每当store.state.count发生变化时，都会重新求取计算属性，从而更新DOM。

然而，每个组件中都需要反复倒入store。可以将store注入到vue实例对象中去，这样每一个子组件中都可以直接获取store中的状态，而不需要反复的倒入store了。

const app = new Vue({
  el: '#app',
  // 把 store 对象注入到了
  store,
  components: { Counter },
  template: `
        <div>
            <counter></counter>
        </div>
    `
});

这样可以在子组件中使用this.$store.state.count访问到state里面的count这个状态

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      // 获取store中的状态
      return this.$store.state.count;
    }
  }
}

mapState

当一个组件获取多种状态的时候，则在计算属性中要写多个函数。为了方便，可以使用mapState辅助函数来帮我们生成计算属性。

import { mapState } from  'vuex';
export default {
  // ...
  data (){
    localState: 1
  }
  computed: mapState({
    // 此处的state即为store里面的state
    count: state => state.count,
    // 当计算属性的名称与state的状态名称一样时，可以省写
    // 映射 this.count1 为 store.state.count1
    count1,
    //'count'等同于 ‘state => state.count’
    countAlias: 'count',
    countPlus (state){
    // 使用普通函数是为了保证this指向组件对象
      return state.count + this.localState;
    }
  })
}
//上面是通过mapState的对象来赋值的，还可以通过mapState的数组来赋值
computed: mapState(['count']);
//这种方式很简洁，但是组件中的state的名称就跟store中映射过来的同名

对象扩展运算符
mapState 函数返回的是一个对象，为了将它里面的计算属性与组件本身的局部计算属性组合起来，需要用到对象扩展运算符。

computed: {
  localState () { 
    ...mapState ({
      
    })
  }
}

这样，mapState中的计算属性就与localState计算属性混合一起了。

在vue中，通过计算属性获取存储在vuex的状态，可以直接获取，也可以通过辅助函数获取

  computed: {
      count() {
        return this.$store.state.count
      }
      // 或者
      ...Vuex.mapState(["count"])
    }

2)Getter(类似于vue实例中的computed)
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。此时可以用到getters，getters可以看作是store的计算属性，其参数为state。
用于将state中静态的数据经过计算再返回
getter也可以返回一个函数，来实现给 getter 传参。在你对store里的数组进行查询时非常有用。

const store = new Vuex.Store({
  state: {
    todos: [
      {id: 1, text: 'reading', done: true},
      {id: 2, text: 'playBastketball', done: false}
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    }
  }
});

获取getters里面的状态，方法一

store.getters.doneTodos //  [{ id: 1, text: 'reading', done: true }]
//在组件中，则要写在计算属性中，
computed: {
  doneTodos () {
    return this.$store.getters.doneTodos;
  }
}

使用mapGetters获取getters里面的状态：方法二

import {mapState, mapGetters} from 'vuex';
computed: {
...mapState(['increment']),
...mapGetters(['doneTodos'])
}

3)Mutation(突变)
更改Vuex的store中的状态的唯一方法是提交 mutation，必须是同步操作。
mutation函数的第一个参数为state ,第二个参数是来接受在调用mutation的时候用户传递的实参

 mutations: {
      SET_MSG(state, payload) {
        state.msg = payload
      }
    }
  可以在vue生命周期钩子中提交突变或者在methods中映射突变方法
    created() {
      // 参数一是突变方法的名字，参数二是传递的实参
      this.$store.commit('SET_MSG', 'hello mutation')
    }
    methods:{
      ...Vuex.mapMutations(['SET_MSG'])
    }

在组件中提交mutations

那么mutation应该在哪里提交呢？因为js是基于事件驱动的，所以改变状态的逻辑肯定是由事件来驱动的，所以store.commit(‘increment’)是在组件的methods中来执行的。
方法1: 在组件的methods中提交

 methods: {
  increment(){
    this.$store.commit('increment');
  }
}

方法2: 使用mapMutaions
用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。

import { mapMutaions } from 'vuex';
export default {
  // ...
  methods: {
    ...mapMutaions([
    'increment' // 映射 this.increment() 为 this.$store.commit('increment')
  ]),
  ...mapMutaions([
      add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
    ])
    }
}
 
// 因为mutation相当于一个method，所以在组件中，可以这样来使用
<button @click="increment">+</button>

4)actions(动作)
用来存放异步请求方法,action提交的是 mutation，从而间接的变更state中的状态
因为mutations中只能是同步操作，但是在实际的项目中，会有异步操作，那么actions就是为了异步操作而设置的。这样，就变成了在action中去提交mutation，然后在组件的methods中去提交action。只是提交actions的时候使用的是dispatch函数，而mutations则是用commit函数。

actions中的异步请求接受与store实例具有相同方法和属性的一个形参-context（上下文对象）
可使用context.state获取state
可使用context.getters获取getters
可使用context.commit()提交突变
可使用context.dispatch()分发动作
或者this.$store.state/getters/commit/dispatch

   actions: {
        async findAll(context) {
          let res = await axios.get('http://...');
          // 提交突变
          context.commit('SET_MSG', res.data.data)
        }
      }

一个简单的action

 const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state){
      state.count++;
    }
  },
  actions: {
    increment(context){
      context.commit('increment');
    }
    /* 可以用参数结构的方法来写action
     increment({commit}){
     commit('increment');
     }
     */
  }
});
 
// action函数接受一个context参数，这个context具有与store实例相同的方法和属性。
 
// 分发action
store.dispatch('increment');

action同样支持payload和对象方式来分发，格式跟commit是一样的，不再赘述。

在组件中分发action

方法1: 在组件的methods中，使用this.$store.dispatch(‘increment’)。

方法2: 使用mapActions，跟mapMutations是类似的。

import { mapActions } from 'vuex'
export default {
  // ...
  methods: {
    ...mapActions([
    'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')
  ]),
  ...mapActions({
  add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment')
})
}
}
 
// 同样在组件中，可以这样来使用
<button @click="increment">+</button>

可以在vue生命周期钩子中分发动作或者在methods中映射actions中的方法

  created() {
      // 参数一是异步函数的名字，参数二可以传递实参
      this.$store.dispatch('findAll')
    }
    methods:{
      ...Vuex.mapActions(['findAll'])
    }

组合actions

因为action是异步的，那么我们需要知道这个异步函数什么时候结束，以及等到其执行后，会利用某个action的结果。这个可以使用promise来实现。在一个action中返回一个promise，然后使用then()回调函数来处理这个action返回的结果。

actions:{
  actionA({commit}){
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation');
        resolve();
      },1000);
    })
  }
}
 
// 这样就可以操作actionA返回的结果了
store.dispatch('actionA').then(() => {
  // dosomething ...
});
 
// 也可以在另一个action中使用actionA的结果
actions: {
  // ...
  actionB({ dispatch, commit }){
    return dispatch('actionA').then(() => {
      commit('someOtherMutation');
    })
  }
}

4.辅助函数

Vuex构造函数内部提供了快捷映射数据、方法的方法
使用对象的解构，将内部的辅助函数解构出来

let { mapState, mapGetters, mapMutations, mapActions } = Vuex
使用
  computed: {
    ...mapState(['msg']),          // 状态映射 
    ...mapGetters(['reMsg'])       // 计算属性映射
  },
  methods: {
    ...mapMutations(['SET_MSG']),  // 突变映射
    ...mapActions(['findAll'])     // 动作映射
  }

5.模块化开发

1)目的
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。
当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。
每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
namespaced表示设置命名空间
使用过程：

const moduleA = {
    state: {...},
    getters: {...},
    mutations: {....},
  actions: {...}
}
 
const moduleB = {
    state: {...},
    getters: {...},
    mutations: {....},
  actions: {...}
}
 
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
});
 
store.state.a // 获取moduleA的状态
store.state.b // 获取moduleB的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vuex.js"></script>
</head>
<body>
    <div id="app">
        {{aMsg}}
        {{bMsg}}
    </div>
    <script>
        let {mapState}=Vuex;
        let aModule={
            namespaced:true,
            state:{
                aMsg:"a的数据"
            }
        }
        let bModule={
            namespaced:true,
            state:{
                bMsg:"b的数据",
            }
        }
        let store=new Vuex.Store({
            modules:{
                a:aModule,
                b:bModule
            }
        })
        new Vue({
            el:'#app',
            data:{},
            store,
            computed:{
                ...mapState('a',['aMsg']),
                ...mapState('b',['bMsg'])
            }
        })
    </script>
</body>
</html>

模块内部的状态

对于模块内部的mutation和getter，接受的第一个参数是模块的局部状态state。顺便说一下，根结点的状态为rootState。

const moduleA = {
  state: { count: 0},
  getters: {
    doubleCount(state){
      return state.count * 2;
    }
  },
  mutations: {
    increment(state){
      state.count ++ ;
    }
  },
  actions: {...}
}

模块的动态注册

在模块创建之后，可以使用store.registerModule方法来注册模块。

store.registerModule('myModule', {
  // ...
});

依然的，可以通过store.state.myModule来获取模块的状态。
可以使用store.unregisterModule(moduleName)来动态的卸载模块，但是这种方法对于静态模块是无效的（即在创建store时声明的模块）。

原文链接：https://blog.youkuaiyun.com/yusirxiaer/article/details/99634868