Vue：Vuex状态管理

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

https://vuex.vuejs.org/zh/

状态管理

多个组件需要共享一个变量(状态)，且该变量会是响应式的

什么情况用：用户登录状态、用户名称、头像 、商品收藏、购物车

安装

npm install vuex --save

使用

store/index.js

// vuex 状态管理，共享变量
import { setTimeout } from 'core-js'
import Vue from 'vue'
import Vuex from 'vuex'

// 1. 安装插件
Vue.use(Vuex)

// 2. 创建并导出 Stroe对象
export default new Vuex.Store({
  // 定义状态
  state: {
    msg: "vuex状态",
    count: 1
  },
  mutations: {
    // state 是默认参数 对应上面的 state 对象
    cheage(state) {
      state.msg = "cheage msg value"      
    },

    // muations 需要传递参数
    addStr(state, text) {
      state.count += text
    },

    update(state) {
      state.msg = "actions 等同于 异步的 mutations"
    }
  },
  actions: {
    // 异步操作之后 在去mutations 中修改 state的值
    updateMsg(context, palyod) {
      setTimeout(() => {
        context.commit('update')
        console.log(`传递过来的参数 plyod ${palyod}`)
      }, 1000)
    }
  },
  getters: {
    // 类似于计算属性
    getValue(state) {
      return state.msg + "getters" 
    },
    // 此处的getters代表的就是当前的getter对象
    getGet(state, getters) {
      return getters.getValue + "state getters"
    },
    //getters 需要传递参数
    getVar(state) {
      return msg => {
        return state.msg = `${msg} + getters 传递参数`
      }
    }
  },
  modules: {
    // 分模块
    a: {
      state: {
        aname: "a"
      },
      mutations: {

      },
      actions: {

      },
      getters: {
        //  getters 当前模块下的 getters ， state 当前模块下的state， rootState 根state的数据
        values(state, getters, rootState) {
          return state.aname + rootState.msg
        }
      }
    }
  }
})

main.js

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

Vue.config.productionTip = false

new Vue({
  // 导入roter对象
  router,

  // 导入 store对象
  store,
  render: h => h(App)
}).$mount('#app')

views/News.vue

<template>
  <div><ul>
      <li>1</li>
      <!-- 获取store中的共享数据 -->
      <li>{{ $store.state.msg }}</li>
      <!-- 用modules 中a的state -->
      <h1>{{ $store.state.a.aname}}</h1>

      <button @click="cheageMsg">改变</button>
      {{ $store.state.count }}
      <button @click="addStrValue(3)">12312</button>

      <!-- 获取store getters数据 -->
      <!-- modules中getters 和这样方式一样 -->
      <li>{{ $store.getters.getValue }}</li>

      <button @click="asynUpdate(`pyload 123`)">异步actions</button>

            <!-- 获取store getters数据 -->
      <li>{{ $store.getters.getVar("带参数的getters") }}</li>
    </ul></div>
</template>

<script>
export default {
    name: "News",

    methods: {
      cheageMsg() {
        // modules 中 也是一样的使用muations
        // 使用store对象中里面 mutations 中的 cheage 方法
        this.$store.commit('cheage')
      },

      addStrValue(text) {
        this.$store.commit('addStr', text)
        
        // 另一种提交风格 这种提交风格是将 对象传递过去
        // this.$store.commit({
        //   type: "addStr",
        //   text
        // })
      },
      asynUpdate(text) {
        // 调用 store中的actions 异步方法
        this.$store.dispatch('updateMsg', text)
      }

    },
}
</script>

<style>

</style>