Vuex命名空间的设定

Vuex 2.1开始Store的module划分就变得简单了，追加namespace:true就可以自动划分命名空间了。

追加了这个选项之后，state，getters，actions，mutations就会自动地被划分到和自己所属的module名（下面的例子里module名就是helloModule）同名的命名空间里。

modules/hello/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export default helloModule = {
  namespaced: true, // 追加
  state: {
    hello: false,
  },
  getters: {
    // 方法名
    hello(state) {
      return state.hello
    }
  },
  actions: {
    // 方法名
    sayHello(context, payload) {
      api.sayHello()
        .then((data) => {})
        .catch((err) => {})
    }
  },
  mutations: {
    // 方法名
    hello(state, payload) {
      state.hello = true
    }
  }
}

呼出的时候「mapState/mapActions参数传递命名空间」的形式也可以。
还可以使用明确指明命名空间的形式。

引用方：使用参数传递命名空间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
computed: {
  ...mapState('helloModule', // ← 参数传递命名空间
    // 在这里state并不是根state、而是被自动识别为helloModule/state的命名空间
    {  
      hello: state => state.hello
    }
  }
},
methods: {
  ...mapActions('helloModule', //← 参数传递命名空间
    // this.sayHello() 是 this.$store.dispatch('helloModule/sayHello')的映射
    ['sayHello']
  )
}

明确指定命名空间

1
2
3
4
5
6
7
8
9
10
11
computed: {
  ...mapState({
    hello: state => state.helloModule.hello // 这个state是全局store。
  }
},
methods: {
  ...mapActions([
    // this.sayHello() 是this.$store.dispatch('helloModule/sayHello')的映射
    'helloModule/sayHello'
  ])
}