1.简介
0.安装:npm install vuex --save;
1.状态管理模式:开发过程中监视变量数值变化的工具;
2.统一管理:它采用集中式存储管理应用的所有组件的状态;
3.store仓库:vuex的核心,就是一个放数据的容器;
3.响应式:状态变化会影响其使用的组件进行新的渲染和更新;
4.显式变更数据:不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation;
5.适用范围:中大型的页面开发,其中包括大量的数据通信;
6.非单纯的全局变量:存储是响应式的,不可以通过store.keyNum样式修改状态值;
2.示例
//定义一个store仓库:store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={
num: 0
}
const mutations={
addNum(state) {
return state.num++
}
}
const getters={
numAdd(){
return state.num++
}
}
const actions={
guoAddNum(context){
context.commit("addNum")
}
}
export default new Vuex.Store({
state, //用于存储数据,类似vue实例的data属性
actions, //用于进行递交异步更改,通过调用mutations实现对数据的更改(推荐使用)
mutations, //用于递交更改,对state对象中的属性数据进行更改
getters //相当于computed计算属性,不可修改状态值
})
//主入口脚本文件:main.js
import Vue from './vue'
import store from './store'
Vue.config.productionTip=false
new Vue({
el:"#app",
store
})
//使用state的组件:demo.vue
<template>
<div>
<span> {{this.$store.state.num}} </span> //使用state的值
<span> {{this.$store.getters.numAdd}} </span> //格式化state的值
<button @click='toStoreAdd'> 加上1 </button> //过渡区改变state中的值
</div>
</template>
<script>
export default{
name:'demo',
methods:{
toStoreAdd(){
this.$store.dispatch("guoAddNum")
}
}
}
</script>
3.注意事项
1、actions是异步的和mutations是同步的,推荐使用actions来修改state中的值;
2、mutations属性函数只接受两个参数,第一个 state是必有的,第二个传递新参是可选的;
3、actions属性函数必须传递的第一个参数是context,用于触发mutations函数;
扫描二维码关注公众号,回复:
4860212 查看本文章
![](/qrcode.jpg)
4、不可以在组件的data中定义state中的值,会导致混乱渲染。应该定义在computed中return回来就好;