vuex2基础使用

vuex:状态管理模式（集中式、响应式管理数据）

安装：yarn add vuex@3.6.2 / npm i vuex@3.6.2

配置store:

• import Vue from 'vue'
• import Vuex from 'vuex'
• Vue.use(Vuex)
• const store = new Vuex.Store({配置项/核心概念})
• export default store

挂载实例：main.js

• import store from '@/store'
• new Vue({store,...,})

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    // 配置项，核心概念
    state: {
        num: 100,
    },
    // 唯一能修改数据的地方
    mutations: {
        changeNum(state,data) {
            state.num += data
        }
    },
    //异步修改数据
    actions: {
        //content:上下文对象，里面有commit和dispatch可以直接调用
        //data:可选参数，接收外部传入的数据
        changeNumAsync(context,data) {
            context.commit('changeNum',data)
        }
    }
})
export default store

state：存储共享数据

• 访问的方式：

1. $store.state.num
2. import {mapState}  from 'vuex'  ；  computed:{ ...mapState（["xx"]）}

• computed:{ ...mapState（["xx"]）//将state里的属性映射为当前组件的计算属性

getters：创建快捷访问方式

• 访问的方式：

1. $store.getters.num
2. import {mapGetters}  from 'vuex'  ；  computed:{ ...mapGetters（["xx"]）}

• computed:{ ...mapGetters（["xx"]）//将getters里的属性映射为当前组件的计算属性

mutations:唯一的直接修改数据的地方

• 访问的方式：

1. $store.commit.('fn',data)
2. import {mapMutations}  from 'vuex'  ；  methods:{ ...mapMutations（["fn"]）}

• methods:{ ...mapMutations（["fn"]）//将mutations里的方法映射为当前组件的方法

actions:异步修改数据，间接修改数据

访问的方式：

1. $store.dispatch.('fn',data)
2. import {mapActions}  from 'vuex'  ；  methods:{ ...mapActions（["fn"]）}

• methods:{ ...mapActions（["fn"]）//将actions里的方法映射为当前组件的方法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    // 配置项，核心概念
    state: {
        num: 100,
        userinfo: {
            username: '小红',
            age: 20,
        },
    },
    // 唯一能修改数据的地方
    mutations: {
        changeNum(state, data) {
            state.num += data
        },
    },
    //异步修改数据
    actions: {
        changeNumAsync(context, data) {  //context上下文对象，相当于store
            context.commit('changeNum', data)
        },
    },
    // 创建快捷访问方式
    getters: {
        age: (state) => state.userinfo.age,
        userName(state) {
            {
                return state.userinfo.username
            }
        },
    },
})
export default store

<template>
    <div>
        <h1>减少组件</h1>
        <p>获取共享num:{{ num }}</p>
        <button @click="changeNum(-10)">num-10</button>
        <button @click="changeNumAsync(-5)">异步num-5</button>
        <p>年龄{{ age }}</p>
        <p>姓名{{ userName }}</p>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
import Vuex from 'vuex'
console.log(Vuex)
export default {
    computed: {
        //将state里的属性映射为当前组件的计算属性
        ...mapState(['num']),
        ...mapGetters(['age', 'userName']),
    },
    methods: {
        ...mapMutations(['changeNum']),
        ...mapActions(['changeNumAsync']),
    },
}
</script>

<style></style>

注意：

1. vuex里面的数据不能直接使用v-model双向绑定，否则会直接修改。缺点：调试器不能同步，严格模式会报错。
2. 不推荐直接$store.state.num++ 这种方式修改数据。缺点：调试器不能同步，严格模式会报错。