vuex的作用
简单理解,就是将多个组件共享的变量统一放到一个地方去管理,比如用户登录时的数据token。
快速上手
安装:npm install vuex
首先,我们在src文件夹下创建一个文件夹:store,在文件夹中创建一个index.js文件,写入以下代码。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
},
decrement(state) {
state.count--
}
}
})
export default store
其次,我们要让所有的Vue组件都能使用这个store。就需要在main.js中引入。引入方式与router一致。
import Vue from 'vue'
import App from './App.vue'
import router from "./router"
import store from "./store"
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router,
store,
}).$mount('#app')
最后,使用App.vue
<template>
<div>
<h2>{{$store.state.count}}</h2>
<button @click="addCount">增加</button>
<button @click="delCount">减少</button>
</div>
</template>
<script>
export default {
name: 'about',
methods: {
addCount() {
this.$store.commit('increment')
},
delCount() {
this.$store.commit('decrement')
}
}
}
</script>
这就是vuex
最简单的使用方式。
-
提取出公共的store对象,用于保存在多个组件中共享的状态
-
将store对象放到Vue实例中,这样可以保证所有的组件都能使用到数据
-
在其他组件中使用store中的数据即可。
通过this.$store.state.属性,即可访问状态
通过this.$store.commit(‘名称’)即可访问mutations中对应的方法。
state中的状态可以直接进行修改,但是我们不建议这么修改。我们建议通过mutations去进行操作。
核心概念
State
Vuex提出使用单一状态树(单一数据源)。就是将一堆公用的数据放到一起去管理。如果你的状态信息是存放到多个Store中的,那么之后的管理和维护就会非常麻烦。
State类似于vue中data,用于定义全局信息。不建议直接修改state中的数据。
Getters
有时候,我们需要从state中获取一些经过改变后的数据,可以使用getter。同时,state中的数据不建议直接获取,最好是通过getter。
state: {
count: 0,
studentList: [
{id: 3, name: '张三', age: 23},
{id: 4, name: '李四', age: 24},
{id: 5, name: '王五', age: 25},
{id: 6, name: '赵六', age: 26}
]
},
getters: {
getStudentByAge(state) {
return state.studentList.filter(e => e.age > 24)
}
},
在页面中,就可以通过this.$store.getters.xxx获取 。这里获取的时候不加括号。
Mutations
通过mutations可以对数据进行修改,也可以传入其他参数。
Mutations类似于vue中的methods
Mutations中的方法,第一个参数一定是state,如果需要传参,从第二个参数开始。
mutations: {
increment(state, n) {
state.count += n
},
decrement(state) {
state.count--
}
}
在其他组件中,如果需要调用mutations,直接使用this.$store.commit(‘方法名’, 参数列表)
即