vuex状态管理使用记录一

第一种情况：

        store中的设置为：

主要文件是modules中的文件以及index.js文件。

其中index.js中代码如下:

import Vuex from 'vuex'

import app from './modules/app'
import user from './modules/user'
import permission from './modules/permission'

import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    app,
    user,
    permission
  },
  state: {

  },
  mutations: {

  },
  actions: {

  },
  getters
})

modules中user.js的代码如下：

import storage from 'store'
import { login} from '@/api/login'
import { ACCESS_TOKEN } from '@/store/mutation-types'

const user = {
  state: {
    token: '',
    name: '',
    ...
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    ...
  },

  actions: {
    // 登录
    Login ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo).then(response => {
          const {code,result,message} = response
          if(code==200){
              storage.set(ACCESS_TOKEN, result, 7 * 24 * 60 * 60 * 1000)
              commit('SET_TOKEN', result)
              resolve(response)
          }
        }).catch(error => {
          reject(error)
        })
      })
    },
...
}
export default user

然后在main.js中引用挂载：

import store from './store/'

new Vue({
  router,
  store,
  ...
  render: h => h(App)
}).$mount('#app')

在页面中使用的时候，可以这样：

import { mapActions } from 'vuex'
import { mapGetters } from 'vuex'

export default {
   ...
   data(){
    return{
     userid:this.$store.state.user.id
    }
   }
   computed: {
    ...mapGetters(['user']),
    
    }
   methods: {
        ...mapActions(['Login']),
        
     toLogin(code) {
      const { Login} = this
      Login(code) // 使用Login方法
        .then((res) => {
          ...
          })
        .catch((err) => { ...})
        .finally(() => {...})

    },
    }
}

获取状态值，可以如上代码：使用mapGetters，然后如果页面中调用则可以直接书写，比如：

<input v-model="user.name"/>

也可以直接使用this.$store.state.user.name。

以上两个方式都可以获取当前的状态。