一、Vuex 的基础搭建

1.src 下面创建 store.js，文件内容如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)

const options={
    //状态对象
    state: {
        count: 111
    },
    //触发状态
    mutations: {
        increment (state) {
            state.count++
        },
        jian(state){
            state.count–
        }
    }
}
const store =new Vuex.Store(options)
export default store;

2.mainjs 中引用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


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

import { create } from 'domain';
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
    el: "#app",
    router,
    store,
    render:h=>h(App)
})

3. 在 Vue 文件中使用

<p>Vuex的数据 {{$store.state.count}}</p>

下面开始正式做数据同步；

一、computed 动态计算

1
2
3
4
5


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

在 vue 文件中直接使用组件内的数据即可；

<p>内部的数据 {{detailCount}}</p>

二、mapState 辅助；

在单独构建的版本中辅助函数为 Vuex.mapState 在组件内，先 import；

1
2
3
4


import { mapState } from ‘vuex’
computed:mapState({
    count : state => state.count
})

这样即可；还可以做下面这种简化的写法

1

computed:mapState(['count'])

下面这种方法，还是非常常用的；

如果想连 mutatios 里面的方法也一起简写；

可以下面这样；

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


import { mapState ,mapMutations } from 'vuex'

export default {
  name:"UserDetail",
  data(){
      return{
          logo:"AXIHE"

      }
  },
  computed: mapState(['count']),
  methods:mapMutations([
      'increment',
      'jian'
  ]),
  watch:{
      '$route'(to,form){
          console.log(to)
          console.log(form)
      }
  }
}

这样的话，就可以直接使用了；