使用Vuex这一篇已经足够我开发使用了
列举的是项目中常用的
**`app.js`**
```js
import Vue from 'vue'
import store from './store'
import router from './router'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
```
**`store/index.js`**
```js
import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'
import base from './base'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
// eslint-disable-next-line
const plugins = debug ? [createLogger()] : [];
const store = new Vuex.Store({
// 组合各个模块
modules: {
base
},
// 关闭严格模式
strict: debug,
plugins
})
export default store
```
**`store/base.js`**
```js
export default{
namespace:false,
//开启namespace:true，该模块就成为命名空间模块了
state:{
userInfo:{},
//声明变量，类似于data
list: [],
},
getters:{}, //
mutations:{
// 通过mutations设置数据
setUserInfo (state, data) {
state.userInfo = Object.assign(state.userInfo, data) // 特殊场景深拷贝
},
setList (state, data) {
state.list = data // 常用场景
},
},
actions:{
// actions获取数据
async getUserInfo ({ commit }) {
const info = await getUserInfo()
commit('setUserInfo', info)
return info
},
},
}
```
**`hello.vue`**
```vue
<template>
<div>
<header>{{ userInfo.name }}</header>
<nav>{{ name }}</nav>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState({
userInfo: (state) => state.base.userInfo,
}),
name(){
return this.$store.state.userInfo.name
},
},
data () {
return {
list: []
}
},
created () {
this.getUserInfo()
}
methods: {
...mapActions(['getUserInfo']),
async getData () {
const { userInfo } = this
this.list = []
const params = { ...userInfo }
const result = await getList(params)
this.$store.commit('setList', result)
},
},
}
</script>
```
-end-
