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

1.安装依赖

npm install vuex --save

 mutations同步改变数据

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

mutations为同步函数

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)
        }
 
    }
}

当一个组件需要多个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>

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)
            })
        }

模块管理

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