Vuex:State/Geeters/Mutations/Actions的基本概念和使用方法

Vuex 是一个专为Vue.js 项目开发 的状态管理插件，能集中存储和管理应用的所有组件的状态，并可以以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 有以下几个核心概念： State、Geeters、Mutations、Actions、Modules，分别有各自的作用。

一、Vuex安装和基本使用

首先创建一个测试的Vue项目，并安装Vuex

create project vuex_test
#安装Vuex
npm install vuex --save

安装完成之后，配置Vuex，项目目录下创建store文件夹，然后再创建index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        count:0
    }
})

export default store;

在main.js 引入 store

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

最后，修改具体引用的页面

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  created() {
    console.log(this.$store.state.count)
  }
}

使用npm run serve 运行，就可以在浏览器控制台 看到输出了 state的数据， 这样就完成了Vuex的基础使用。

二、Vuex核心

1.State

State主要包含了store中存储的数据，基本用法如下：

const store = new Vuex.Store({
    state:{
        count:0
    }
})

在Vue组件中获取Vuex状态，官方推荐了2种用法

第一种： 计算属性

export default {
  name: 'App',
  components: {
  },
  computed:{
    count(){
      return this.$store.state.count
    }
  },
  created() {
    console.log(this.count)
  }
}

第二种：mapState辅助函数

如果要在组件中获取多个状态，声明计算属性会比较冗余和复杂，为了解决这个问题，官方提供了mapState 辅助函数

import {mapState} from 'vuex'
export default {
  name: 'App',
  components: {
  },
  computed:{
    ...mapState(['count'])

  },
  created() {
    console.log(this.count)
  }
}

2.Getter

Getter 可以看作是 store的计算属性，如果需要重state种存储的数据，派生一些状态，并且在多个组件中都要使用，那么就可以用到getter

用法如下：

const store = new Vuex.Store({
    state:{
        count:0
    },
    getters:{
        isEven(state){
            return state.count % 2 == 0
        }
    }
})

读取getters 的2种方式： 计算属性和mapGetters辅助函数

import {mapGetters} from 'vuex'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  computed:{
    ...mapGetters(['isEven']),
    isEven1(){
      return this.$store.getters.isEven;
    }
  },
  created() {
    console.log(this.$store.getters.isEven)
    console.log(this.isEven)
    console.log(this.isEven1)
  }
}

3. Mustation

更改Vuex的store种的状态的唯一方式，就是提交 mutation,mutation 必须是回调函数

const store = new Vuex.Store({
    state:{
        count:0
    }
    mutations:{
        increment(state){
            state.count ++
        },
        incrementBy(state, payload){
            state.count += payload.number
        }
    }
})

组件调用mutation的两种方式： mapMutations 辅助函数和 store.commit

import {mapState} from 'vuex'
import {mapMutations} from 'vuex'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  computed:{
    ...mapState(['count']),
    ...mapGetters(['isEven'])
  },
  methods:{
    ...mapMutations(['increment','incrementBy']),
    ...mapMutations({plusplus:'increment'})
  },
  created() {
    console.log(this.count)
    this.$store.commit('increment')
    console.log(this.count)
    this.increment()
    console.log(this.count)
    this.incrementBy({number:4})
    console.log(this.count)
    this.plusplus()
    console.log(this.count)
  }
}

4.Action

action 主要用于提交mutation，可以是异步方法

声明action

const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        increment(state){
            state.count ++
        },
        incrementBy(state, payload){
            state.count += payload.number
        }
    },
    actions:{
        countAction(context){
            context.commit('increment')
        },
        countByAction(context,payload){
           return new Promise(resolve => {
                setTimeout(()=>{
                    context.commit('incrementBy',payload);
                    resolve();
                },1000)
            })

        }
    }
})

组件调用action， 有2种方式

• store.dispatch
• mapActions 辅助函数

import {mapState} from 'vuex'
import {mapActions} from 'vuex'

export default {
  name: 'App',
  components: {
    
  },
  computed:{
    ...mapState(['count']),
  
  },
  methods:{
    ...mapActions(['countByAction'])
  },
  async created() {
    console.log(this.count)
    this.$store.dispatch('countAction')
    console.log(this.count)

    // await this.$store.dispatch('countByAction',{number:3})
    await this.countByAction({number:3})
    console.log(this.count)
  }
}

Vuex 一般用于中大型单页应用的状态管理，可以解决非父子组件之间的通信文件，可以作为数据存储中心，保存登录状态、购物车信息等。