Vuex基础知识

1.概念

vuex是一个专门为vue.js设计的集中式状态管理架构。
状态？，可以理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。
简单的说就是data中需要共用的属性

2.安装引入

//安装
npm install vuex --save
//引入
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

3.从一个简单的Demo开始

1.在src下新建一个文件夹，取名vuex
2.在vux新建文件store.js 专门管理共享数据

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

Vue.use(Vuex)
const state = {
    count:1
}

//表示我导出一个vuex实例，并且这里实例上存储了一个state对象
export default new Vuex.Store({
    state
})

接下来我们尝试在组件上取刚刚定义的state里面的count值

<template>
    <div>
        {{ $store.state.count }}
    </div>
</template>

<script>
import store from '@/vuex/store'
export default {
  data(){
    return {
        msg:'123'
    }
  },
  store
}
</script>

4. 取值

1.非常简单，用我们之前的计算属性直接取值

computed:{
    count(){
        return this.$store.state.count;
    }
}

2.第二种，mapState的对象来取值
首先，要先引入mapState

import {mapState} from 'vuex';

然后在计算属性里写如下代码

computed:mapState({
        count:state=>state.count
 })

2.第三种，mapState的数组来取值

computed:mapState(["count"])

这种是最简单的方法

5. 在取值的时候对数据做过滤和加工 getters （类似于组件中的 computed）

在store.js 加上getters对象

const getters = {
    count(state){
        return state.count += 1;
    }
}

在导出处加上getters

export default new Vuex.Store({
    state,mutations,getters
})

在组件上有两种调用方式：
1.直接在组件的计算属性上调用

computed:{
    ...mapState(["count"]),
    count(){
        return this.$store.getters.count;
    }
}

2.用mapGetters来获取
在组件上导入mapGetters

import { mapGetters } from 'vuex'

接着在计算属性上

computed:{
    ...mapGetters['count']
}

6.改变值: Mutations

vuex中改变状态值的方法只能通过mutations
关键语法：$store.commit( )
在我们刚刚写的store.js 加上mutations对象，里面编写我们改变state值的逻辑，比如我们通过add和reduce两个函数来改变state的值

const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}

当然，要在导出的时候加上mutations

export default new Vuex.Store({
    state,mutations
})

下面在组件上，我们介绍几种调用mutations的方法
1.直接通过$store.commit( )调用

<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>

2.通过mapMutations调用
组件上导入mapMutations

import { mapMutations } from 'vuex';

在methods上加上mapMutations

  methods:{
     ...mapMutations(['add','reduce'])
  }

7.Action

Action 和之前说的mutation 很类似，它们的区别
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
分发action
在store.js 加上actions对象

const actions = {
    addAction(context){
       context.commit('add')
    },
   // { commit }表示对 context 对象进行解构
    reduceAction({ commit }){
        commit('reduce')
    }
}

导出加上actions

export default new Vuex.Store({
    state,getters,mutations,actions
})

分发Action
1.第一种

methods:{
   addAction(){
        this.$store.dispatch('addAction')
    },
    reduceAction(){
        this.$store.dispatch('reduceAction')
    }
}

2.第二种 mapActions
导入mapActions

import { mapState,mapGetters,mapMutations, mapActions } from 'vuex'

直接在methods加上如下代码

methods:{
...mapActions(['addAction','reduceAction'])
}

8 需要遵循的规则

1.应用层级的状态应该集中到单个 store 对象中。

2.提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

3.异步逻辑都应该封装到 action 里面。