一、vuex状态管理模式库
- vuex 是一个专为 vue.js 应用程序开发的状态管理模式库
- 集中式存储管理应用的所有组件的状态
- 以相应的规则保证状态以一种可预测的方式发生变化
- 不能直接修改store里面的数据,要使用预先定义的修改方式来修改
二、安装npm i vuex -S
npm install vue -S
npm install vuex -S
- 修改vuex源码,复制了@vue/devtools-api文件夹到lib中
import { inject, reactive, watch } from './vue.esm-browser.js';
import { setupDevtoolsPlugin } from './devtools-api/lib/esm/index.js';
三、创建store
import {createApp} from './lib/vue.esm-browser.js'
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.tasks.push(payload)
}
}
})
const app = createApp();
app.use(store)
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