Vue Vuex的使用和原理 专门解决共享数据的问题

Vuex专门解决共享数据的问题

多组件共享时使用，如用户ID各组件需要根据ID发送请求获取数据，任意组件可以进行增删改，相当于全局变量

Vuex 工作流程

如果确定值参数可以不经过Actions 直接走

安装Vuex

vue2使用 vuex@3
vue3使用 vuex@4

npm i vuex@3

要求

> 一个两个组件 要求两个组件实现 加法运算，保存到const state = { sum: 0 }当中

配置Vuex文件

在src下面创建store/index.js(官方文档的写法)

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
//导入Vuex

Vue.use(Vuex)

const actions = {

    addSum(context, value) {
        //context 上下文里面有commit函数 value 是组件传过来的值
        context.commit('AddSum', value)
        //获取到了数据 操作数据
    },

    //获取数据 如发起请求等
}


const mutations = {


    AddSum(state, value) {
        state.sum += value
        //这样就完成了赋值
    }
    
    //操作数据
}

const state = { sum: 0 }
//保存数据


//暴露出去给别人使用
export default new Vuex.Store({
    actions, mutations, state

})

然后在导入到main.js

import store from './store/index'
//如果不写文件名默认找index 如果没有报错

new Vue({
  render: h => h(App), store,
  //放到vue身上
}).$mount('#app')

组件1写入数据

	<button @click="add">加button>

add()
    { 
        this.$store.dispatch('addSum',1)
    }
    

组件2读取State数据

 readData() { 

            console.log(this.$store.state.sum)
        }

---

如果没有什么业务逻辑可以不写dispatch直接 context.commit(‘AddSum’, value)

---

getters配置项 数据加工

类似于计算属性，如给计算器、结果*10 +10…等是一个配置项

const getters = {
    deal(state) { return state.sum * 10 }
    //让sum乘10
}

//暴露出去给别人使用
export default new Vuex.Store({
    actions, mutations, state, getters

})

获取数据

  console.log(this.$store.getters.deal)
  //获取加工后的数据