Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
状态管理
多个组件需要共享一个变量(状态),且该变量会是响应式的
什么情况用:用户登录状态、用户名称、头像 、商品收藏、购物车
安装
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>