面试官：请你说一说vuex的五个属性，分别是什么，区别和用途说一下（二）https://developer.aliyun.com/article/1429054
07 项目结构
对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：
├── index.html ├── main.js ├── api │ └── ... # 抽取出API请求 ├── components │ ├── App.vue │ └── ... └── store ├── index.js # 我们组装模块并导出 store 的地方 ├── actions.js # 根级别的 action ├── mutations.js # 根级别的 mutation └── modules ├── cart.js # 购物车模块 └── products.js # 产品模块
08 vuex简单应用实例
创建一个用来共享的存储，在这个例子中它将通过 vue/vuex 注入到组件当中。
定义组件可以调用的 actions，它们仍然是集中定义的。
定义实际接触存储状态的 mutations。我们这么做，actions 就可以形成不止一个 mutation，或者执行逻辑去决定调用哪一个 mutation。这意味着你再也不用担心组件当中的业务逻辑了，成功！
当状态更新时，任何拥有 getter，动态属性和映射到 store 的组件都会被立即更新。
main.js
用 Vuex 创建了一个存储并将其直接传入应用程序当中
import Vue from 'vue' import App from './App.vue' import store from './vuex/store' new Vue({ el: '#app', store, render: h => h(App) })
store.js
export default new Vuex.Store({ state: { messages: [] }, actions: { newMessage ({commit}, msg) { commit('NEW_MESSAGE', msg) } }, mutations: { NEW_MESSAGE (state, msg) { state.messages.push(msg) } } })
Client.vue
<template> <div> <h1>{{ clientid }}</h1> <div> <ul> <li v-for="message in messages"> <label>{{ message.sender }}:</label> {{ message.text }} </li> </ul> <div> <input v-model="msg" placeholder="Enter a message, then hit [enter]" @keyup.enter="trySendMessage"> </div> </div> </div> </template>
<script> import { mapState, mapActions } from 'vuex' export default { data() { return { msg: '' } }, props: ['clientid'], computed:{ ...mapState({ messages: state => state.messages }) }, methods: { trySendMessage() { this.newMessage({ text: this.msg, sender: this.clientid }) this.resetMessage() }, resetMessage() { this.msg = '' }, ...mapActions(['newMessage']) } } </script> <style> </style>
App.vue
<div> <client clientid="Client A"></client> </div> <div> <client clientid="Client B"></client> </div>
<script> import client from './components/Client.vue' import store from './vuex/store' export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } }, components:{client} } </script>
参考链接：
