1.本地安装: npm i vuex --save
2.执行npm run dev 启动项目
3.在项目的src目录下新建一个目录store,在该目录下新建一个index.js文件,用来创建vuex实例.首先在该文件中引入vue和vuex,创建Vuex.Store实例保存到变量store中,然后使用export default导出store:
4.在main.js文件中引入该文件,再在vue实例全局引入store对象:
5. 开始编写vuex业务代码, 数据如何保存?
state
在store实例中,通过state保存vuex的数据源,页面通过this.$store.state获取需要的数据:
getters
getters相当于vue中的computed计算属性,返回值会根据它的依赖被缓存起来,只有当它的依赖值发生了改变才会被重新计算.
在store实例中,通过getters 监听state中的值的变化,返回计算后的结果.页面通过this.$store.getters获取计算后的返回值:
有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数,减少我们对这些状态数据的操作:
const getters = {
getToDo (state) {
return state.todos.filter(item => item.done === true)
// filter 迭代过滤器 将每个item的值 item.done == true 挑出来, 返回的是一个数组
}
}
mutations
mutation是修改store中值的唯一方法,即如果需要修改store中的值唯一的方法就是提交mutation来修改.
在store实例中,通过mutations 定义修改store中值的方法,页面通过this.$store.commit提交mutations中的方法:
actions
官方不推荐我们直接去修改store里面的值,而是让我们去提交一个actions,在actions中提交mutation再去修改状态值.
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
在store实例中,通过actions定义提交mutation的方法,页面通过this.$store.dispatch提交actions中的方法:
mapState, mapGetters, mapActions, mapMutations
是对应四大金刚的辅助函数
组件中使用:
store定义参考:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
blogTitle: '迩伶贰blog',
views: 10,
blogNumber: 100,
total: 0,
todos: [
{id: 1, done: true, text: '我是码农'},
{id: 2, done: false, text: '我是码农202号'},
{id: 3, done: true, text: '我是码农202号'}
]
}
const actions = {
addViews ({commit}) {
commit('addViews')
},
clickTotal ({commit}) {
commit('clickTotal')
},
blogAdd ({commit}) {
commit('blogAdd')
}
}
const mutations = {
addViews (state) {
state.views++
},
blogAdd (state) {
state.blogNumber++
},
clickTotal (state) {
state.total++
}
}
const getters = {
getToDo (state) {
return state.todos.filter(item => item.done === true)
// filter 迭代过滤器 将每个item的值 item.done == true 挑出来, 返回的是一个数组
}
}
export default new Vuex.Store({
state,
actions,
mutations,
getters
})
// 将四大金刚挂载到 vuex的Store