vuex工作原理与流程

vuex工作原理与流程

Vue组件（action里面的dispatch )--> actions(commit方法） -->mutations（Mutate）--> state（getter） -->store更新所有调用vuex的组件（Vue Component组件）

1、state
存储应用状态数据的对象，与vue组件中data类似
state的值可以是对象，也可以是返回对象的函数
通过store.state访问状态数据
示例如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//必须在使用vuex之后去创建store
let store = new Vuex.Store({
   
    state: {
   },
    getters: {
   },
    mutations: {
   },
    actions: {
   }
})

//创建state
let state = _=>({
   a:1})
const store = new Vuex.Store({
   
    state
})

const store2 = new Vuex.Store({
   
    state
})
console.log(store.state == store2.state);
store.state.a = 100;
console.log(store.state.a, store2.state.a);

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
Vue.use(Vuex);
const store = new Vuex.Store({
   
    state
})

export default store;
// 在组件中使用state
// stores/state.js
export default () => ({
   
    title: '骄阳似火',
    content: '来杯冷饮吧'
})

<!--Home.vue-->
<template>
  <div class="home">
    <h2>{
   {
   title}}</h2>
    <div>{
   {
   content}}</div>
  </div>
</template>
<script>
import store from '@/store'
export default {
   
  name: 'home',
  data() {
   
    return {
   
      title: store.state.title,
      content: store.state<