vue学习笔记——vuex—store配置

Posted 2020-10-31 zhoulixue

可以将不同视图的仓库放到不同的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: <App/>
})