main.js
``` import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store'
Vue.config.productionTip = false
// vuex 动态注册一个 modules store.registerModule('c', { state: { text: 3 } })
// vuex 动态解绑一个 modules // store.unregisterModule('c')
// vuex 监听一个指定字段是否发生变化 // store.watch((state) => state.count + 1, (newCount) => { // store.watch((state) => state.count, (newCount) => { // console.log('new count watch', newCount) // })
// // vuex 拿到所有 mutation 的变化 // store.subscribe((mutation, state) => { // // 触动了 mutation 里面的哪个方法 // console.log(mutation.type) // // mutation 里面更新的最新值 // console.log(mutation.payload) // })
// vuex 拿到所有 action 的变化 // store.subscribeAction((action, state) => { // // 触动了 action 里面的哪个方法 // console.log(action.type) // // action 里面更新的最新值 // console.log(action.payload) // })
new Vue({ router, store, render: h => h(App) }).$mount('#app') ```
store - index.js
``` import Vue from 'vue' import Vuex from 'vuex'
Vue.use(Vuex)
// 是否为开发环境 const isDev = process.env.NODE_ENV === 'development'
// 建立一个 Store const store = new Vuex.Store({ // 开启规范检测 strict: isDev, // 定义属性 state: { count: 0, firstName: 'dzm', lastName: 'xyq' }, // 更新(同步)，mutations 不能存在异步操作 mutations: { updateCount (state, num) { state.count = num } }, // 更新(异步)，actions 允许异步操作 actions: { updateCountAsync (store, data) { setTimeout(() => { store.commit('updateCount', data.num) }, data.time) } }, // 获取计算属性 getters: { fullName (state) { return ${state.firstName} ${state.lastName} } }, // 插件列表 plugins: [ (store) => { console.log('初始化插件列表') } ], // 模块功能 modules: { // 模块A a: { // 默认 vuex 是会把所有的 mutations 放在一个全局的对象中，如果需要根据模块区分，那么需要在模块中配置 namespaced: true // 这样的好处就是，每个模块里面都可以写相同名字的 mutations，如果不声明，那么所有的 mutations 都会在一个对象中，就会命名重复冲突 namespaced: true, state: { text: 1 }, mutations: { updateText (state, text) { // 这里面的 state 就是 a 模块里面的 state 了 state.text = text } }, getters: { // state 当前A模块的 state // getters 当前A模块所有的 getters // rootState 当前父类的 state textPlus (state, getters, rootState) { // 这样就可以直接使用父类中的属性了 return state.text + rootState.count // 同时也可以使用别的模块中的值 // return state.text + rootState.b.text } }, actions: { // add (ctx) { } add ({ state, commit, rootState }) { // 直接调用A模块内的 updateText // commit('updateText', rootState.count) // 直接调用父模块内的 updateCount commit('updateCount', 123, { root: true }) } }, modules: { // 还可以在子模块中继续嵌套模块 } }, // 模块B b: { state: { text: 2 } } } })
export default store ```
App.vue
```
{{count}}
{{fullName}}
{{textA}}
{{textPlus}}
{{textC}}
```
