Vue学习笔记-vuex

1. Vuex是什么

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

2. 什么时候使用Vuex

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

3. vuex 的工作原理

4. vuex环境搭建

1. 下载 Vuex：npm i vuex

2. 创建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
})

3. 在src/main.js中创建 vm 时传入store配置项：

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store'

Vue.config.productionTip = false

Vue.use(Vuex)

new Vue({
    el:"#app",
    render: h => h(App),
    store
})

5. vuex的使用

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

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

3. 组件中修改vuex中的数据：$store.dispatch(‘action中的方法名’,数据) 或 $store.commit(‘mutations中的方法名’,数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

src/components/Count.vue:

<template>
  <div>
    <h1>当前求和为：{{$store.state.sum}}h1>
    <select v-model.number="n">
      <option value="1">1option>
      <option value="2">2option>
      <option value="3">3option>
    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.commit('JIA',this.n)
      },
      decrement(){
        this.$store.commit('JIAN',this.n)
      },
      incrementOdd(){
        this.$store.dispatch('incrementOdd',this.n)
      },
      incrementWait(){
        this.$store.dispatch('incrementWait',this.n)
        
      },
    }
}
script>
<style lang="css">
  button{
    margin: 5px;
  }
style>

src/store/index.js:

//该文件用于创建vuex最核心的store

// 引入Vuex
import Vuex from 'vuex';
import Vue from 'vue';
import vueResource from 'vue-resource';

Vue.use(Vuex)
Vue.use(vueResource)

//准备 actions 用于响应组件中的动作
const actions = {
/* 	jia(context,value){
		window.console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	},
	jian(context,value){
		window.console.log('actions中的jian被调用了')
		context.commit('JIAN',value)
	}, */
	incrementOdd(context,value){
		window.console.log('actions中的incrementOdd被调用了')
		if(context.state.sum % 2){
			context.commit('JIA',value)
		}
	},
	incrementWait(context,value){
		window.console.log('actions中的incrementWait被调用了')
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}
//准备 mutations 用于操作数据
const mutations = {
    JIA(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,
})