vue学习模块记录一 (vuex-store)

 vscodet

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
  },
  actions: {
  },
  mutations: {
  },
  getters: {
  },  
  modules: {
    
  }
})
export default store

• state: state 定义了应用状态的数据结构，同样可以在这里设置默认的初始状态。

• actions:Actions 即是定义提交触发更改信息的描述，常见的例子有从服务端获取数据，在数据获取完成后会调用store.commit()来调用更改 Store 中的状态。可以在组件中使用dispatch来发出 Actions。

actions: {
    LOAD_PROJECT_LIST: function ({ commit }) {
      axios.get('/secured/projects').then((response) => {
        commit('SET_PROJECT_LIST', { list: response.data })
      }, (err) => {
        console.log(err)
      })
    }
  }

• mutations: 调用 mutations 是唯一允许更新应用状态的地方。

mutations: {
    SET_PROJECT_LIST: (state, { list }) => {
      state.projects = list
    }
  }

• getters: Getters 允许组件从 Store 中获取数据，譬如我们可以从 Store 中的 projectList 中筛选出已完成的项目列表：

getters: {
 completedProjects: state => {
  return state.projects.filter(project => project.completed).length
 }
}

modules: modules 对象允许将单一的 Store 拆分为多个 Store 的同时保存在单一的状态树中。随着应用复杂度的增加，这种拆分能够更好地组织代码，更多细节参考这里。

以上参考:https://zhuanlan.zhihu.com/p/25042521

 

this.$store.commit('toShowLoginDialog', true);

this.$store.dispatch('toShowLoginDialog',false)

 

 

 

1:如何使用vuex-store    2018-10-26

   vuex是什么呢，相当于react的redux，如果项目使用数据过多的话，直接管理是非常不方便的，那么采用vuex，那些繁琐的问题     就迎刃而解了,学习demo： https://www.cnblogs.com/liningstyle/p/8335129.html

modules:导入模块管理

mutations:方法修改数值

commit('Count ')调用mutations的固定方法，参数为mutations的方法名，当然commit不止传一个参数，也可以传很多

actions：官方推荐 , 将异步操作放在 action 中

context.commit('Count ')的意思是触发mutations下的Count函数，那么怎么触发actions的函数，

<a href="javascript:;" @click="$store.dispatch('Acount')">click

dispatch方法是官方固定触发actions下函数的方法

getters:getters 和 vue 中的 computed 类似 , 都是用来计算 state 然后生成新的数据 ( 状态 ) 的。比如我们heade.js的state有一个值show:false   getters就是计算与false相反的，但是它计算的值是不能直接修改的， 需要对应的 state 发生变化才能修改。　

最后一点就是为了方便操作开发，一般情况$store.state.Heade.show，$store.state.show写起来不是很方便，那么vuex的辅助函数mapState、mapGetters、mapActions就可以解决这个问题，把stroe对象那个映射到this

import {mapState} from 'vuex';