vuex的梳理
- vue项目中不可避免的要进行数据管理,可以选择使用localhost或者父子传值,兄弟传值的问题,但是,如果是祖上十八辈给你传值,那么,这应该是传家宝吧(要每一代每一代的传递给下一代,知道传到需要用的地方)这时候,还是要使用父子传值就太繁琐了,而且,如果有出现问题并不是很快的定位到错误的地址,所以引出vuex这个概念
Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行更改。--------vuex官网给出的解释
如果理解了这个图,vuex就应该很好去理解了
Vuex存储与普通全局对象的不同之处有两点:
Vuex存储是反应性的。当Vue组件从中检索状态时,如果商店的状态发生变化,它们将作出反应并有效地进行更新。
您不能直接更改商店的状态。更改商店状态的唯一方法是显式地提交突变。这样可以确保每个状态更改都留下可跟踪的记录,并启用有助于我们更好地了解应用程序的工具
好了,说了一些概念,下面直接上手撸了
yarn add vuex
然后在项目的文件中创建一个store文件夹,(至于为啥叫store,我个人认为可能是模仿官网习惯了,),在store的文件夹中创建一个index.js,在这个文件中引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store =new Vuex.Store({
state:{
count:1
}
})
export default store
然后在main.js中引入store
import store from ‘./store’
在跟主键上注册
el: ‘#app’,
router,
store,
components: { App },
template: ‘’
在页面中使用vuex中的数据
{{this.$store.state.count}}
看到这个效果就可以了
说明你的第一步完成了
第二步是mutations
如果在使用的过程中,我们想要改变这个数值怎么办呢,在vuex中规定:如果想要改变state中的数据,只能使用mutations来显式改变,这也符合单项数据流的理念
在store的对象中新建一个mutations的对象
在每个对象的第一个参数是state,第二个参数可以是进行运算的数值
然后在页面中使用这些方法必须要使用commit来进行调用
到这一步,就算第二部完成了,对于一般的练手项目就可以了
下面说一下getter这个,它相当于computed计算属性,只有当他依赖的数据发生变化,它才会重新计算
到这一步,第三步也就完成了
下面就是action这一块,因为vuex并不建议我直接使用mutation来更新数据,而是建议我们使用dispatch(“mutations方法名”)来更新数据
到这一步,就算完成了vuex的基本操作,在去看看官方文档,就清晰明了了许多