码迷,mamicode.com
首页 > 其他好文 > 详细

VUEX 总结

时间:2019-06-07 19:17:35      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:nbsp   返回值   dex   table   更改   component   apm   highlight   操作   

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 总结

标签:nbsp   返回值   dex   table   更改   component   apm   highlight   操作   

原文地址:https://www.cnblogs.com/gongliying/p/10988777.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!