vuex 使用说明

最新推荐文章于 2024-08-13 15:00:04 发布

@tangguo123

最新推荐文章于 2024-08-13 15:00:04 发布

阅读量244

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/hj17629030978/article/details/106826524

版权

安装、使用vuex

vue.js 2.0 开发环境下安装vuex：

yarn add vuex --save

在项目src目录下新增一个store文件夹，在该文件夹内新建index.js文件和modules文件夹。目录结构如下：
在这里插入图片描述

文件说明：

mutations-type.js：定义所有的mutations名称

export const APP_SET_TITLE = 'APP_SET_TITLE'
export const USER_SET_TOKEN = 'USER_SET_TOKEN'

app.js: app范围的状态管理

import {APP_SET_TITLE} from './mutations-type'

const app = {
  namespaced: true,
  state: {
    title: 'vuex-test'
  },
  getters: {
    title: state => state.title
  },
  mutations: {
    [APP_SET_TITLE]: (state, title) => {
      state.title = title
    }
  },
  actions: {
    setAppTitle ({commit}, title) {
      commit(APP_SET_TITLE, title)
    }
  }
}

export default app

user.js: user范围的状态管理

import {USER_SET_TOKEN} from './mutations-type'

const user = {
  namespaced: true,
  state: {
    token: ''
  },
  getters: {
    token: state => state.token
  },
  mutations: {
    [USER_SET_TOKEN]: (state, token) => {
      state.token = token
    }
  },
  actions: {
    setUserToken ({commit}, token) {
      commit(USER_SET_TOKEN, token)
    }
  }
}

export default user

index.js：导出每个范围状态管理

import app from './app'
import user from './user'

export default {app, user}

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import modules from './modeules'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules
})

export default store

将store挂载到当前项目的Vue实例当中

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from '@/store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

在vue组件中使用vuex

方式一：

...
<p>{{title}}</p>
<p>{{token}}</p>
...
<script>
import { createNamespacedHelpers } from 'vuex'

const { mapGetters: mapGettersApp } = createNamespacedHelpers('app')
const { mapGetters: mapGettersUser, mapActions: mapActionsUser } = createNamespacedHelpers('user')
...
computed: {
   ...mapGettersApp(['title']),
   ...mapGettersUser(['token'])
},
methods: {
  ...mapActionsUser(['setUserToken']),
  setToken () {
    const token = 'xcvdfbndbskbfdsbd3425jbjw235'
    this.setUserToken(token)
  }
}
...
</script>

方式二：

...
<p>{{title}}</p>
<p>{{token}}</p>
...
<script>
import {mapGetters} from 'vuex'
...
computed: {
  ...mapGetters('app', ['title']),
  ...mapGetters('user', ['token'])
},
methods: {
  ...mapActions('user', ['setUserToken']),
  setToken () {
    const token = 'xcvdfbndbskbfdsbd3425jbjw235'
    this.setUserToken(token)
  }
}
...
</script>