vue学习笔记(三)——vuex—store配置

可以将不同视图的仓库放到不同的store中。

——store

  index.js

  foo.js

  bar.js

——views

  Foo.vue

  Bar.vue

App.vue

main.js

1.配置单个store的信息

foo.js

export default{
  namespaced: true, //具名引用时使用
  state: {                 //state状态管理(通过store.state.name访问)
    name: 'waite zhou',
    age: 25   
  },
  getters: {               // state的计算属性(通过store.getters.lastName访问)    
    lastName: state => state.name.split(' ')[1] 
  },
  mutations: {          // mutations改变store的状态(通过store.commit('SET_NAME', 'qian')提交修改)
    SET_NAME(state, payload) {
      state.name = payload.name
    }
  },
  actions: {              // actions提交mutations
    changeName({state, commit}){
      return commit('SET_NAME', 'qian')
    }
  },
  modules: {  //子模块,一般在主模块中用到
  
  }
  
}

 

2.多个模块的store组合

store/index.js中配置多个store的组合

// 引用vue和vuex
import Vue from 'vue'
import Vuex form 'vuex'

Vue.use(Vuex)

// 引用子模块
import foo from './foo'
import bar from './bar'

//多个store模块组合
export default new Vuex.Store({
  modules:{
    foo,
    bar
  }
})

 

3.store全局注册

mian.js中注册store的全局信息

// 引入vue
import Vue from 'vue'

// 引入主组件
import App from './App'

// 引入store

import store from './store'

// 注册全局组件
new Vue({
  el: '#app',
  router,  // 注册路由
  store,  // 注册store
  components: {APP}, 
  template: 
})

 

转载于:https://www.cnblogs.com/zhoulixue/p/8893587.html

你可能感兴趣的:(vue学习笔记(三)——vuex—store配置)