VUEX 总结
Posted gongliying
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUEX 总结相关的知识,希望对你有一定的参考价值。
What is Vuex?
vuex是一个专为Vue.js应用程序开发的状态管理模式。他采用集中式储存管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变换
VUEX并不限制你的代码结构,但是,他规定了一些需要遵守的规则:
1.应用层级的状态应该集中到单个的store对象中
2.提交 mutation是更改状态的唯一方法,并且这个过程是同步的
3.异步逻辑都应该封装到action里面
使用之前先安装
1.在vue-cli中安装vuex npm install vuex --save
2. 在src文件目录下新建一个名字为store的文件夹,为方便引入并在store文件夹下新建一个index.js 内容如下
import Vue from ‘vue‘; import Vuex from ‘vuex‘; Vue.use(Vuex); const store = new Vuex.Store(); export default store;
3.接下来在main.js里面引入store 然后再全局注入一下,这样一来就可以在每个组件中使用this.$store了;
import store from ‘./store‘//引入store new Vue( el: ‘#app‘, router, store,//使用store template: ‘<App/>‘, components: App )
讲完安装 接下来 进入正题
STATE state 单一状态树 每个应用只有一个store,state里面存放状态,将state看作所有组件的data,用于包存所有组件的公共数据
const state = tableHeader :[],//表格头部数据 tableData:[],//表格内容数据
mapstate 辅助函数 一个组件想要获取多种状态时,为每一个状态都声明计算属性有些重复,所以使用mapstate帮助我么生成计算属性
//使用mapstate
computed: ...mapState([
// 表格头部数据
"tableHeader",
// 表格内容数据 "tableData" ]), ,
GETTERS getters 所有组件的computed属性,getters的返回值会根据他的依赖被缓存起来,且当他的依赖值发生改变之后会被重新计算
MUTATIONS mutations store中的methods ,mutations对象中保存着更改数据的回调函数type,第一个参数是state,第二个参数是载荷payload,也就是自定义的参数,调用mutaions中回调函数, 只能使用store.commit(type, payload)
const mutations = //获取表头数据 [type.GET_HEADER_DATA] (state, data) state.tableHeader = data; , // 获取表体数据 [type.GET_TABLE_DATA] (state, data) state.tableData = data; ,
使用常量代替Mutation 事件类型,但是一定要在 store.js中引用
//mutations.js
export const GET_TABLE_DATA = "GET_TABLE_DATA" //获取列表数据 export const GET_HEADER_DATA = "GET_HEADER_DATA" //获取列表头部数据
//store.js
import * as type from ‘../store/mutions-types‘
在组件中提交mutation 可以在组件中使用this.$store.commit(‘xxx‘)提交mutation ,或者使用mapMutation辅助函数将组件中的methods映射为store.commit调用 需要在根节点注入store
import mapMutations from ‘vuex‘ export default // ... methods: ...mapMutations([ ‘GET_TABLE_DATA‘, // 将 `this.increment()` 映射为 `this.$store.commit(‘increment‘)
]
ACTION action类似于mutation 不同在于action提交的是mutation,而不是直接更改状态,action可以包括异步操作
const actions = // 获取表格头部数据 getTableHeader:function(commit, state) return api.getTableHeader().then(res => commit(type.GET_HEADER_DATA,res.data.Model.headList) ) .catch((error)=> alert(‘error‘) ) , // 获取表格体 getTableData:function(commit,state) return api.getTableData().then(res=> // console.log(res) commit(type.GET_TABLE_DATA,res.data.Model.list) ) ,
分发action 通过store.dispatch方法触发 但是也可以使用mapAction辅助函数将组件的method映射为 store.dispatch 调用(需要在根节点注入store)
methods: getTableHeader() this.$store.dispatch("users/getTableHeader").then(()=> this.tableHeader=this.$store.state.users.tableHeader ) ----------------------------或者---------------------------------- methods: ...mapActions([ // 表头数据 "getTableHeader", ]),
MODULES modules 将store分成模块(modules)每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
以上是关于VUEX 总结的主要内容,如果未能解决你的问题,请参考以下文章