Vue学习笔记|vuex

1 vuex的概念

vuex是专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

如下图，vuex可以实现ABCD间组件共享数据x。

2. 何时用vuex

多个组件依赖同一状态
来自不同组件的行为需要变更同一状态

3. vuex工作原理

State中保存需要共享的数据
Vue Component调用dispactch，将数据和操作传递给Actions，Actions再将其提交给Mutations，在Mutations中实现对数据的操作，将操作结果返回到State中，最终传回Vue Component。

当不需要使用到Backend API时，也可以不经过Actions，Vue Component直接将数据和操作传递给Mutations。

store管理Actions，Mutations，State。

4. Vuex环境搭建

4.1 下载vuex
vue2使用vuex3版本，vue3使用vuex4版本
npm i vuex@3
npm i vuex@4

4.2 创建js文件，创建store
注意：Vue.use(Vuex) 要在创建store之前，因为store只是Vuex内的一部分，没有Vuex，就没有store

//该文件用于创建vuex中最核心的store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//用于响应组件中的动作
const actions = {}
//用于操作数据
const mutations = {}
//用于存储数据
const state = {}

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

4.3 在全局Vue中使用store，使所有组件都能使用store
在main.js中引入store，在Vue实例对象中加入store

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

5 如何在组件中使用vuex

1. 在vuex中保存变量

export default {
    namespaced:true,
    acitons:{
        addOdd(context, value){
            if(context.state.sum%2){
                //actions向mutations提交ADD方法
                context.commit('ADD', value)
            }
        }
    },
    mutations:{
		//mutations中对数据进行处理，并修改state中的数据信息
        ADD(state, value){
            console.log('mutations中ADD被调用 ',state,value)
            state.sum+=value;
        }
    },
    state:{
        sum:0,
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
}

2. 如下给按钮绑定一个事件，实现当偶数时自加1，下面将该方法与vuex绑定起来

    <button @click="increment(n)">当偶数时自加1</button>

3. 提交action，当触发加法事件时，提交actions，提交actions之后，会自动commit到mutations中，最后，改变state中的数据

increment(n){
                this.$store.commit('addOdd',n)
            }

4. 接收vuex中state的数据，并显示到页面上
   利用计算属性接收数据

sum(){
                return this.$store.state.sum}