vue中使用vuex(状态管理)模块管理

男娘i 2021-09-02 08:27 611阅读 0赞

**1.安装依赖**

npm install vuex --save

## ** mutations同步改变数据** ##

**思路：state定义数据，getters和computed类似，mutations中改变state的状态，vue文件中调用commit触发mutations中的方法**

**mutations为同步函数**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70][]

**2.在src文件夹中新建store文件夹其中新建index.js  内容写**

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    export default new Vuex.Store({
       state: {
           count: 0,
           isShow:'false'
       },
       getters:{
           //实时监听state值的变化
           getCount(state){
               return state.count
           }
       },
       mutations: {
           addCount (state,count) {
                state.count = count
           },
           delCount(state,count){
                state.count = count;
           }
       }
    })

**3.main.js中引入store**

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

**4.homeBar文件(点击加号按钮，使用commit触发****mutations中改变state的方法****)**

<template>
      <div id="homeBar">
        我是homeBar
        <button @click="addBar">+</button>
        <p>state获取 {
       {this.$store.state.count}}</p>
        <p>getters获取 {
       {this.$store.getters.getCount}}</p>
        <p>通过mapState获得{
       {count}}</p>
        <p>通过mapGetters获得{
       {getCount1}}</p>
      </div>
    </template>
    
    <script>
    
     import { mapState, mapGetters } from 'vuex'
    
    export default {
        name:'homeBar',
        data(){
          return{
          }
        },
        computed:{
        //计算属性的名称与 state 的子节点名称相同时，可以给 mapState 传一个字符串数组
        //把count isShow解构到this上
          ...mapState(['count','isShow']),
          ...mapGetters({
            getCount1:'getCount'
          })
        },
        // computed:mapState({
        //   count:'count',
        //   count:(state) => state.count
        // }),
        methods:{
          addBar(){
            this.$store.state.count++
            this.$store.commit('addCount',this.$store.state.count)
          },
            //将 `this.addCount()` 映射为 `this.$store.commit('addCount')`
            //将addCount解构到this上，并且帮我们完成commit这一步
           ...mapMutations['addCount']//这一行相当于commit那一行 写完这一行，后面可以直调用this.addCount
           ...mapMutations({
               addBar:'addCount'
          })
    
    
        }
    }
    </script>

**5.homeList文件(点击减号)同homeBar文件**

<template>
      <div id="homeList">
         我是homeList
         <button @click="delList">-</button>
        <p>state获取 {
       {this.$store.state.count}}</p>
        <p>getters获取 {
       {this.$store.getters.getCount}}</p>
      </div>
    </template>
    
    <script>
    
    export default {
        name:'homeList',
        data(){
            return{
            }
        },
        methods:{
            delList(){
                if(this.$store.state.count > 0){
                    this.$store.state.count--
                }
                this.$store.commit('delCount',this.$store.state.count)
            }
     
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1][]

**当一个组件需要多个state的值时，使用mapState和mapGetters**

--------------------

## **action异步改变数据** ##

**思路：组件中dispatch派发给actions,在actions中做异步处理在触发mutations**

**1.store.js中 mutations中添加新方法，以及actions**

mutations: {
           addTwoEachM(state){
                state.count += 2
                console.log(new Date(),state.count)
               
           }
       },
       actions:{
           addTwoEachA({commit}){
               console.log(new Date()) 
               setTimeout(()=>{
                    commit('addTwoEachM')
               },2000)
           }
       }

**2.homeList文件**

<template>
      <div id="homeList">
         我是homeList
         <button @click="delList">-</button>
        <p>state获取 {
       {this.$store.state.count}}</p>
        <p>getters获取 {
       {this.$store.getters.getCount}}</p>
        <p>使用action异步加2
            <button @click="addTwoEachA">+2</button>
        </p>
      </div>
    </template>
    
    <script>
    
    export default {
        name:'homeList',
        data(){
            return{
            }
        },
        methods:{
            addTwoEachA(){
                 this.$store.dispatch('addTwoEachA',{count:this.$store.state.count})
            }
    
        }
    }
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 2][]

**`store.dispatch` 可以处理被触发的 action 的处理函数返回的 Promise，并且 `store.dispatch` 仍旧返回 Promise**

**store.js中**

addTwoEachA({commit}){
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                  commit('addTwoEachM')
                  resolve()
                }, 1000)
              })
           }

homeList文件中

addTwoEachA(){
                 this.$store.dispatch('addTwoEachA').then(()=>{
                    console.log('倒计时执行完调用',new Date())
                    console.log('count改变为'+this.$store.state.count)
                })
            }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 3][]

**模块管理**

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 的状态

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70]: /images/20210813/ca500efa32994bbcb36c00fff823b16e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1]: /images/20210813/9118a1959f084018a0399c9831e1d9f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 2]: /images/20210813/0e60fb5a041946708d279c421365e4ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 3]: /images/20210813/d3609fbe16734e17af45d831526b71b7.png