什么是Vuex?
官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
人为理解:Vuex是用来管理组件之间通信的一个插件
为什么要用Vuex?
我们知道组件之间是独立的,组件之间想要实现通信,我目前知道的就只有props选项,但这也仅限于父组件和子组件之间的通信。如果兄弟组件之间想要实现通信呢?嗯..,方法应该有。抛开怎么实现的问题,试想一下,当做中大型项目时,面对一大堆组件之间的通信,还有一大堆的逻辑代码,会不会很抓狂??那为何不把组件之间共享的数据给“拎”出来,在一定的规则下管理这些数据呢? 这就是Vuex的基本思想了。
怎么使用Vuex?(安装vuex之后)
import Vue from 'vue' import Vuex from 'vuex' //引入vuex vuex是基于vue存在的 let store = new Vuex.Store({ state, mutations, getters, actions }) //创建vuex实例 new Vue({ el: '#app', router, store, //并在vue实例中挂载 render: h => h(App) })
new Vuex.Store({}) 表示创建一个Vuex实例,通常情况下,他需要注入到Vue实例里. Store是Vuex的一个核心方法,字面上理解为“仓库”的意思。Vuex Store是响应式的,当Vue组件从store中读取状态(state选项)时,若store中的状态发生更新时,他会及时的响应给其他的组件(类似双向数据绑定) 而且不能直接改变store的状态,改变状态的唯一方法就是,显式地提交更改(mutations选项)
Vuex有4个核心选项:state mutations getters actions
state的使用 :用来存放组件之间共享的数据。他跟组件的data选项类似,只不过data选项是用来存放组件的私有数据。
let state = { count : 0, } //在state这个对象中存放一个数据 //在标签中用this.$store.state.count输出 <p> {{this.$store.state.count}} </p>
mutation的使用 :在 Vuex store 中,实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation。 mutations下的函数接收state作为参数,接收一个叫做payload(载荷)的东东作为第二个参数,这个东东是用来记录开发者使用该函数的一些信息,比如说提交了什么,提交的东西是用来干什么的,包含多个字段,所以载荷一般是对象(其实这个东西跟git的commit很类似)还有一点需要注意:mutations方法必须是同步方法!
//在组件中想要使用方法 给state中的数据+10,但是在method中写的只是改变了视图上的值,并不是数据本身 <p> {{this.$store.state.count}} </p> <p> <button @click="add">+10</button> </p> methods: { add(){ //将这个方法提交给oadd这个方法 this.$store.commit('oadd',10) }, }, //在mutations中 写oadd let mutations = { oadd(state,n){ state.count+=n }, }
getters的使用:类似于vue的计算属性
//在state中有一个数组 let state = { arr : [1,2,3,4,5,6], } 在getters中这个数组进行逻辑编写 let getters = { doarr : state=>{ return state.arr.map(item => { return item*10 }); } } 在组价中输出 <p> {{this.$store.getters.doarr}} </p>
action的使用 :
actions和mutations的区别
1.Actions 提交的是 mutations,而不是直接变更状态。也就是说,actions会通过mutations,让mutations帮他提交数据的变更。
2.Action 可以包含任意异步操作。
let state = { color : "red" } //在state定义一个color数据 //在视图中使用这个颜色数据 <p class="color" :style="{color:this.$store.state.color}"> color </p> <p> //点击按钮三秒后换字体颜色 <button @click="change">change</button> </p> //先在method中将方法使用disoatch给actions里定义的thechange methods: { change(){ this.$store.dispatch('thechange') } }, //在mutations中写逻辑代码 let mutations = { ochange(state){ state.color = "pink" } } //在actions中实现这个异步方法 let actions = { thechange({commit}){ setTimeout(()=>{ commit('ochange') },3000) } }