vuex初探

1.安装vuex

npm install vuex --save

2.在src文件夹下创建一个store文件夹，然后在里面创建一个index.js文件，文件内容如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

// 定义常量    如果访问他的话，就叫访问状态对象
const state = {
    count: 1 
}

// mutations用来改变store状态,  如果访问他的话，就叫访问触发状态
const mutations = {
    //这里面的方法是用 this.$store.commit('add') 来触发
    add(state){
        state.count++;
    },
    sub(state){
        state.count--;
    }
}

//暴露到外面，让其他地方的引用
export default new Vuex.store({
   state,
   mutations
});

3.在main.js中引入store文件夹中的index.js

import Vue from 'vue'
import App from './App'
import router from './router' 
import store from './store'   //引用index.js
Vue.config.productionTip = false  //阻止在启动时生成生产提示 

//vue实例
new Vue({
  el: '#app',
  router,
  store,                           //把store挂在到vue的实例下面
  template: '<App/>',
  components: { App }
})

4.然后就可以在组件中使用

<template>
  <div class="hello">
      <h1>Hello Vuex</h1>
      <h5>{{$store.state.count}}</h5>
      <p>
        <button @click="$store.commit('add')">+</button>
        <button @click="$store.commit('sub')">-</button>
      </p>
  </div>
</template>

<!-- 加上scoped是css只在这个组件里面生效，为了不影响全局样式 -->
<style scoped>
    h5{
      font-size: 20px;
      color: red;
    }
</style>

5.通过computed属性访问state状态对象

<template>
  <div class="hello">
      <h1>Hello Vuex</h1>
      <h5>{{count}}</h5>
      <p>
        <button @click="$store.commit('add')">+</button>
        <button @click="$store.commit('sub')">-</button>
      </p>
  </div>
</template>
<script>
import{mapState} from 'vuex'
export default{
    computed:{
        count() {
            return this.$store.state.count
        }
        // 方法二 需要引入外部 mapState
        computed:mapState({
          count:state => state.count + 10
        })

        // ECMA5用法
        // computed:mapState({
        //   count:function(state){
        //     return state.count
        //   }
        // })

        //方法三
        // computed: mapState([
        //   'count'
        // ])

        //方法四
        //computed：{
        // ...mapState([
        //    'count'
        // ])
        }
    }
}
</script>
<!-- 加上scoped是css只在这个组件里面生效，为了不影响全局样式 -->
<style scoped>
    h5{
      font-size: 20px;
      color: red;
    }
</style>

6.mutations触发状态(同步状态)

<template>
  <div class="hello">
      <h1>Hello Vuex</h1>
      <h5>{{count}}</h5>
      <p>
        <button @click="add">+</button>
        <button @click="sub">-</button>
      </p>
  </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
  export default{
    name:'hello', //写上name的作用是，如果你页面报错了，他会提示你是那个页面报的错，很实用
    //方法三
    computed: mapState([
      'count'
    ]),
    methods:{
      ...mapMutations([
          'add',
          'sub'
      ])
    }
  }
</script>

7.getters计算属性 首先在store文件index.js添加getters。

const getters = {
  counted(state) {
    return state.count + 60
  }
};

export default new Vuex.Store({
    state,
    mutations,
    getters
})

//counted的参数就是上边定义的状态state
////getters中定义的方法名称和组件中使用的时候一定是一致的,定义的是count方法，使用的时候也用count，保持一致。
在组件中使用

<script>
  import {mapState,mapMutations,mapGetters} from 'vuex'
  export default{
    name:'hello',
    computed: {
      ...mapState([
        'count'
      ]),
      ...mapGetters([
        'counted'
      ])
    },
    methods:{
      ...mapMutations([
          'add',
          'sub'
      ])
    }
  }
</script>

8.actions(异步状态) 在index.js中添加actions

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

// 定义常量
const state = {
    count: 1
}

// mutations用来改变store状态  同步状态
const mutations = {
    add(state){
        state.count ++
    },
    sub(state){
        state.count --
    },
}
// 计算属性
const getters = {
    count(state){
        return state.count + 66
    }
}
// 异步状态
const actions = {
    addplus(context){
        context.commit('add') //调用mutations下面的方法
        setTimeout(()=>{
            context.commit('sub')
        },2000)
        alert('我先被执行了，然后两秒后调用sub的方法')
    },
    subplus(context){
        context.commit('sub')
    }
}

export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})
//context：上下文对象，这里你可以理解称store本身。
//{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。
在组件中使用

<template>
  <div class="hello">
      <h1>Hello Vuex</h1>
      <h5>{{count}}</h5>
      <p>
        <button @click="add">+</button>
        <button @click="sub">-</button>
      </p>
      <p>
        <button @click="addplus">+plus</button>
        <button @click="subplus">-plus</button>
      </p>
  </div>
</template>
<script>
  import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
  export default{
    name:'hello',
    computed: {
      ...mapState([
        'count'
      ]),
      ...mapGetters([
        'count'
      ])
    },
    methods:{
      // 这里是数组的方式触发方法
      ...mapMutations([
          'add',
          'sub'
      ]),
      // 换一中方式触发方法 用对象的方式
      ...mapActions([
        'addPlus',
        'subPlus'
      ])
    }
  }
</script>

<style scoped>
</style>

暂时先写这么多，更深层次的问题还需要自己在实际开发中去学习和体会。