深入理解Vuex原理详解实战应用

Posted 2022-12-13

1.概念

2.何时使用？

多个组件需要共享数据时

3.搭建vuex环境

安装vuex：npm i vuex，要安装对应的版本

3.1 创建文件:src/store/index.js

   //引入Vue核心库
   import Vue from vue
   //引入Vuex
   import Vuex from vuex
   //应用Vuex插件
   Vue.use(Vuex)
   
   //准备actions对象——响应组件中用户的动作
   const actions = 
   //准备mutations对象——修改state中的数据
   const mutations = 
   //准备state对象——保存具体的数据
   const state = 
   
   //创建并暴露store
   export default new Vuex.Store(
   	actions,
   	mutations,
   	state
   )


//第二种形式

// //创建store
// const store = new Vuex.Store(
//     actions,
//     mutations,
//     state,
// )


// //导出store
// export default store

<hr>

3.2 在main.js中创建vm时传入store配置项

   //引入store
   import store from ./store
   
   //创建vm
   new Vue(
   	el:#app,
   	render: h => h(App),
   	store
   )

4.基本使用

4.1、初始化数据、配置actions、配置mutations，操作文件store.js

//引入Vue核心库
import Vue from vue
//引入Vuex
import Vuex from vuex
//引用Vuex
Vue.use(Vuex)

const actions = 
    //响应组件中加的动作
	jia(context,value)
		// console.log(actions中的jia被调用了,miniStore,value)
		context.commit(JIA,value)
	,


const mutations = 
    //执行加
	JIA(state,value)
		// console.log(mutations中的JIA被调用了,state,value)
		state.sum += value
	


//初始化数据
const state = 
   sum:0


//创建并暴露store
export default new Vuex.Store(
	actions,
	mutations,
	state,
)

4.2、组件中读取vuex中的数据：$store.state.sum

4.3、 组件中修改vuex中的数据

：$store.dispatch(action中的方法名,数据)或 $store.commit(mutations中的方法名,数据)

<hr>

5、实际应用

5.1 项目结构

5.2 store/index.js

//该文件用于创建Vuex中最为核心的store

//引入Vuex
import Vuex from vuex
//引入Vue
import Vue from vue

//使用插件
Vue.use(Vuex)

//准备action-- 用于响应组件中的动作
const actions = 
    jia(context, value) 
        console.error("Action中的", context, value)
        context.commit(JIA, value)
    ,

    jiaodd(context, value) 
        if (context.state.sum % 2) 
            console.error("jiaodd")
            context.commit(JIA, value)
        
    ,

    jiaWait(context, value) 
        setTimeout(() => 
            context.commit(JIA, value)
        , 500);
    


//准备mutations-- 用于操作数据（state)
const mutations = 
    JIA(state, value) 
        console.error("Mutations中的", state, value)
        state.sum += value

    ,

    JIAN(state, value) 
        state.sum -= value

    



//准备state--用于存储数据
const state = 
    sum: 0 //当前的和


//第一种形式
//创建并且暴露store
export default new Vuex.Store(
    actions,
    mutations,
    state,
)



//第二种形式

// //创建store
// const store = new Vuex.Store(
//     actions,
//     mutations,
//     state,
// )


// //导出store
// export default store

<hr>

5.3 components/Count.vue

<template>
  <div>
    当前求和为: $store.state.sum 
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default 
  name: "Count",
  data() 
    return 
      n: 1, //用户选择的数字
    ;
  ,
  methods: 
    increment() 
      this.$store.dispatch("jia", this.n);
    ,
    decrement() 
      this.$store.commit("JIAN", this.n);
    ,
    incrementOdd() 
      this.$store.dispatch("jiaodd", this.n);
    ,
    incrementWait() 
		this.$store.dispatch(jiaWait,this.n)

    ,
  ,
;
</script>

<style lang="css">
button 
  margin-left: 5px;

</style>

5.4 App.vue

<template>
	<div>
		<Count/>
	</div>
</template>

<script>
	import Count from ./components/Count
	export default 
		name:App,
		components:Count,
	
</script>

<hr>

5.6 main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from vue
import App from ./App
import router from ./router

//引入store
import store from ./store/index.js

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue(
  el: #app,
  router,
  store,
  render: h => h(App),
  beforenCreate() 
    Vue.prototype.$bus = this
  

)

6、实战测试效果

6.1 视频效果

[video(video-hJjausRG-1662043616977)(type-csdn)(url-https://live.csdn.net/v/embed/236077)(image-https://video-community.csdnimg.cn/vod-84deb4/88cc32c2509c40ce8879a9fb074824dd/snapshots/f0779060781c49858d2222148b714ec5-00003.jpg?auth_key=4815643083-0-0-743d2b21cb5e7a8171735f62f6e37491)(title-vuex)]

6.2 原理图解（代码走向）

6.3 提示注意

• 1、点击加号、纯粹的进行加操作，可以直接跳过dispatch,直接调用commit
• 2、点击减号、和加法类似
• 3、当累加和为奇数、可以继续添加。这个时候就要在Actions中进行逻辑判断、根据判断的结果在调用commit
• 4、定时器也可以直接写在Actions中

7、疑问点和注意点

• 1、为什么非让把业务逻辑写在actions中，直接在组件中写不好吗？通过点击按钮、然后事件进行判断

原因：假如有复杂的业务逻辑处理，比如验证钞票的真假、需要调用多台服务器进行真假的判断。

• 2、如果在actions中直接操作state数据、vuex开发者工具看不到数据的变化。vuex开发者工具只是监听mutations