vuex学习笔记

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