Vue笔记【vuex】

vuex也可以实现组件之间数据的传递，vuex 是实现数据集中式状态管理的插件。数据由 vuex 统一管理。其它组件都去使用 vuex 中的数据。只要有其中一个组件去修改了这个共享的数据，其它组件会同步更新。

安装vuex插件

npm i vuex@3

注意：vue2安装vuex@3 vue3安装vuex@4

27.1 vuex环境的搭建

store.js

store.js中我们进入导入vuex插件，然后创建vuex所需要的三个对象，

//引入Vue
import Vue from 'vue'
//引入vuex插件
import Vuex from 'vuex'
//使用插件
Vue.use(Vuex)

//创建三个对象，
const actions = {}
const mutations = {}
const state = {}

/* //创建store对象
const store = new Vuex.Store({
    //执行某个行为的对象
    actions: actions,
    //负责更新的对象
    mutations: mutations,
    //状态对象
    state: state
})
//导出store对象(暴露)
export default store */


/*简写*/
export default new Vuex.Store({ actions, mutations, state })

main.js

在mian.js中引入Vuex插件中的核心对象store。这样做之后，vue的实例和所有的组件都会多一个$store属性。

import Vue from 'vue'
import App from './App.vue'

//引入Vuex插件中的核心对象store
import store from './vuex/store'

new Vue({
  el: '#app',
  //vm以及所有vc对象上会多一个属性$store
  store:store,
  render: h => h(App),
})

vuex工作原理

在组件中dispatch分发任务，然后被store.js中的actions中的方法处理，然后commit提交给mutations，mutations里面是对state数据的操作，state中数据发生变化后，页面会重新渲染，数据随之更新。

如果学过java框架的同学可以这样理解，这里的actions相当于controller(负责派发任务)，mutations相当于service(处理业务逻辑)，state则相当于dao(对数据的处理)

27.2 小案例演示vuex

这里我们以点我加一的小案例来演示vuex的使用.

store.js

//引入Vue
import Vue from 'vue'
//引入vuex插件
import Vuex from 'vuex'
//使用插件
Vue.use(Vuex)

//创建三个对象，
const actions = {
    plusOne(context, value) {
        value = value + 1
        //context.dispatch("otherAction", value)
        context.commit("PLUS_ONE", value)
    }
}
const mutations = {
    PLUS_ONE(state, value) {
        state.num += value
    }
}
const state = {
    num: 0
}
/*简写*/
export default new Vuex.Store({ actions, mutations, state })

main.js

import store from ‘./vuex/store’ //注意这里的路径哦，看你自己的store.js在什么位置

import Vue from 'vue'
import App from './App.vue'

//引入Vuex插件中的核心对象store
//注意这里的路径哦，看你自己的store.js在什么位置
import store from './vuex/store'

new Vue({
  el: '#app',
  //vm以及所有vc对象上会多一个属性$store
  store:store,
  render: h => h(App),
})

App.vue

<template>
  <div>
    <h1>数字:{{$store.state.num}}</h1>
    <button @click="pulsOne">点我加1</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      startNum:0
    }
  },
  methods: {
    pulsOne() {
      this.$store.dispatch("plusOne",this.startNum)
    }
  }
}
</script>