8_vuex全局状态管理

一、vuex状态管理模式库

• vuex 是一个专为 vue.js 应用程序开发的状态管理模式库
  • 状态: 响应式数据
• 集中式存储管理应用的所有组件的状态
  • 存储在 store 中
• 以相应的规则保证状态以一种可预测的方式发生变化
  • 不能直接修改store里面的数据，要使用预先定义的修改方式来修改

二、安装npm i vuex -S

npm install vue -S
npm install vuex -S

• 修改vuex源码，复制了@vue/devtools-api文件夹到lib中

// 但是由于还没有学习构建工具，要修改源码vuex.esm-browser.js里面的导入
import { inject, reactive, watch } from './vue.esm-browser.js';
import { setupDevtoolsPlugin } from './devtools-api/lib/esm/index.js';

三、创建store

// 导入vue
import {createApp} from './lib/vue.esm-browser.js'
// 导入vuex
import {createStore} from './lib/vuex.esm-browser.js'

const  store = createStore({
  state(){
    return {
      tasks:[
        {name:'吃饭',completed:true,id:1},
        {name:'睡觉',completed:false,id:2},
        {name:'打小报告',completed:false,id:3},
        {name:'写代码',completed:true,id:4},
      ]
    }
  },
  mutations:{
    addTasks(state,payload){
      // state:store的state选项返回的数据集合
      // payload:你传递给addTask的实参
      // mutations里面的函数的调用方式: store.commit('函数名',实参)
      state.tasks.push(payload)
    }
  }
})

const app = createApp();
app.use(store)
// 插件安装以后
// 使用store里面的state:  任意vue实例.$store.state.tasks
// 调用store里面的mutations: 任意vue实例.$store.commit('addTasks',{name:'小小',completed:false,id:new Date().getTime()})
app.mount('#app')

四、选项

state共享状态

• 函数，返回一个对象，定义组件共享的状态

mutations同步函数

• 对象，里面定义多个函数，里面的代码是同步的，里面的函数通过 store.commit(函数名,payload) 提交

actions异步函数

• 对象，里面定义多个函数，里面的代码一般是异步的，里面的函数通过 store.dispatch(函数名,payload) 调用

getters类似计算属性

• 对象，类似计算属性，里面定义多个函数，函数的返回值就是获取到的值，依赖state里面的数据

modules模块

• 对象，模块, 每个模块最好添加一个属性namespaced:true
  • 1 使用模块中的state: store.state.模块名.变量名
  • 2 使用模块中的getters: store.getters[‘模块名/变量名’]
  • 3 提交模块中的mutations: store.commit(‘模块名/函数名’,payload)
  • 4 调用模块中的actions: store.dispatch(‘模块名/函数名’,payload)

五、使用store

this.$store选项式api

useStore()组合式api