vuex笔记

vuex:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex数据流:

 

src/store/index.js: 
// 创建了一个仓库实例
const store = new Vuex.Store({
 // 配置项/核心概念
 // 存储数据的地方 任何组件都可以访问
    state:{ },

// mutations 唯一能修改数据的地方
    mutations: {
        // 形参1: 上面仓库的state的数据对象
        // 形参2: 可选参数, 接受外部传入的数据
        changeNum(state, data) { }
    },

// actions 异步修改数据 间接修改
    actions: {
        // context: 上下文对象, 里面有commit和dispatch可以直接调用
        // data: 可选参数, 接受外部传入的数据
    changeNumAsync(context, data) { context.commit('changeNum', data) },

// 建立快捷访问的方式
getters: { return }
})

触发 mutations修改state数据的方式1: 
<button @click="$store.commit('changeNum', 10)">num+10</button>
方式2: 
import { mapMutations } from "vuex"
methods: { ...mapMutations(["changeNum"]) }
<button @click="changeNum(-10)">num-10</button>

异步修改数据方式1:
<button @click="$store.dispatch('changeNumAsync', 5)">异步修改num+5</button>
方式2: 
import { mapActions } from "vuex"
methods: { ...mapActions(["changeNumAsync"]) }
<button @click="changeNumAsync(-5)">异步修改num-5</button>

state访问数据方式1: $store.state.num
方式2:
import { mapState } from "vuex"
computed: { ...mapState(["num"]) }

快捷访问方式1:
<p>用户的年龄: {{ $store.getters.age }}</p>
方式2: 
import { mapGetters } from "vuex"
computed: { ...mapGetters(["userName", "age"]) }

放在计算属性computed里面的是: mapState和mapGetters
放在方法methods里面的是: mapMutations和mapActions