vuex使用流程

使用流程

1.安装vuex

npm install vuex --save；

2.store文件中引入vuex
为了方便全局使用，一般会新建一个store文件夹，用于存放相关状态值。文件夹下的index.js作为对外输入接口的主文件。在主文件中引入vuex,并输出store接口。
index.js:

import Vue from 'vue'；
import Vuex from 'vuex'；
export default store;；

3.vuex使用
index.js：

Vue.use(Vuex)

4.在全局引用vuex文件
main.js:

import store from './store/index'

5.实例化vue对象时加入store对象
main.js:

new Vue({
  el: '#app',
  router,
  store, //使用store
  template: '<App/>',
  components: { App }
})

读取状态值(3种方式）

1.通过 computed 的计算属性直接赋值(compyted计算属性相当于给data复制，所以也可以直接{ {}}取值）
a.vue(调用模板):

computed: {
  count() {
    return this.$store.state.count;
  }
}

或者

<p>{
  {this.store.state.count}}</p>

2.通过mapState对象赋值
a.vue（调用模板）：
首先引入mapState:

import { mapState } from 'vuex'

然后通过mapState展开为对象赋值

computed: mapState({
  count: state => state.count  //传入state,返回state.count
  // 大概就是 count = state.count
})

3.通过 mapState 的数组来赋值(一般赋值的属性值和状态值一样时使用）开发中一般都一样，所以这个方式使用比较多，此方式不用将每个状态值都在计算属性中赋值一次或者展开为多个对象赋值，相比起前两个方式更为简便快捷。

computed: mapState(["count"])