概述
1、概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应
用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
2.、Github 地址: GitHub - vuejs/vuex: 🗃️ Centralized State Management for Vue.js.
4、什么时候使用vuex
- 多个组件依赖于同一状态
- 来自不同组件的行为需要变更同一状态
原理
说明
2、actions、state、mutations三个都是通过一个store管理
vuex环境搭建
1、安装
npm install vuex --save
2、创建store
创建store文件夹，store下创建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
/*使用store之前得引用vuex*/
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
})
3、main.js中创建vm时配置store配置项
import store from './store'
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
vuex使用
<script src="../store/index.js"></script>
<template>
<div>
<!--显示的是vuex中state中定义的共享数据-->
<h1>当前求和为：{{$store.state.sum}}</h1>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementOdd">当前求和为奇数再加</button>
<button @click="incrementWait">等一等再加</button>
</div>
</template>
<script>
export default {
name:'Count',
data() {
return {
n:1, //用户选择的数字
}
},
methods: {
/*通过dispatch api操作vuex中的actions*/
incrementOdd(){
//第一个参数是actions中的方法名，第二个是共享值
this.$store.dispatch('jiaOdd',this.n)
},
incrementWait(){
this.$store.dispatch('jiaWait',this.n)
},
/*直接通过commit操作vuex中的mutations*/
increment(){
this.$store.commit('JIA',this.n)
},
decrement(){
this.$store.commit('JIAN',this.n)
},
},
mounted() {
console.log('Count',this)
},
}
</script>
<style lang="css">
button{
margin-left: 5px;
}
</style>
store中的index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//准备actions——用于响应组件中的动作
const actions = {
/* jia(context,value){
console.log('actions中的jia被调用了')
context.commit('JIA',value)
},
jian(context,value){
console.log('actions中的jian被调用了')
context.commit('JIAN',value)
}, */
jiaOdd(context,value){
console.log('actions中的jiaOdd被调用了')
if(context.state.sum % 2){
context.commit('JIA',value)
}
},
jiaWait(context,value){
console.log('actions中的jiaWait被调用了')
setTimeout(()=>{
context.commit('JIA',value)
},500)
}
}
//准备mutations——用于操作数据（state）
const mutations = {
//mutations中函数名一般大写
JIA(state,value){
console.log('mutations中的JIA被调用了')
state.sum += value
},
JIAN(state,value){
console.log('mutations中的JIAN被调用了')
state.sum -= value
}
}
//准备state——用于存储数据
const state = {
sum:0 //当前的和
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
==================简写======================
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
actions: {
}
,
mutations: {
SET_CONTENT(state, value){
state.content = value
}
},
state: {
content:{}
},
})
