Vuex 数据仓库（随学随写）

一、简介demo
这里用的vue-cli
引入vuex 1.利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。 –save，因为你这个包我们在生产环境中是要使用的。

npm n install vuex --save

2.新建一个vuex文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。

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

3.使用我们vuex，引入之后用Vue.use进行引用。

Vue.use(Vuex);

store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
//声明一个常量存放  状态对象
const state = {
      count:1
}
//声明一个常量，这里方法来控制常量
const mutations = {
    add (state){
      state.count++;
    },
    reduce(state){
      state.count--;
    }
}
//暴露出去
export default new Vuex.Store({
  state,
  mutations
})

Count.vue

    <template>
      <div>
          <h2>{{msg}}</h2>
          <h3>{{$store.state.count}}</h3>
          <p> 
            <button @click="$store.commit('add')">+</button>
            <button @click="$store.commit('reduce')">-</button>
          </p>
      </div>
    </template>
    import store from '@/vuex/sotre'
    <script>
        export default {
           data(){
              return{
                msg:'hello Vuex'
              }
          },
          store
        }
    </script>

二、state访问状态对象
** 1、通过computed的计算属性直接赋值**
store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
//声明一个常量存放  状态对象
const state = {
      count:1
}
//声明一个常量，这里方法来控制常量
const mutations = {
    add (state){
      state.count++;
    },
    reduce(state){
      state.count--;
    }
}
//暴露出去
export default new Vuex.Store({
  state,
  mutations
})

Count.vue

    <template>
      <div>
          <h2>{{msg}}</h2>
          <h3>{{$store.state.count}} - {{count}}</h3>
          <p> 
            <button @click="$store.commit('add')">+</button>
            <button @click="$store.commit('reduce')">-</button>
          </p>
      </div>
    </template>
    import store from '@/vuex/sotre'
    <script>
        export default {
           data(){
              return{
                msg:'hello Vuex'
              }
          },
          computed:{
            count(){
              return this.$store.state.count
            }
          },
          store
        }
    </script>

2、通过mapState的数组来赋值
store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
//声明一个常量存放  状态对象
const state = {
      count:1
}
//声明一个常量，这里方法来控制常量
const mutations = {
    add (state){
      state.count++;
    },
    reduce(state){
      state.count--;
    }
}
//暴露出去
export default new Vuex.Store({
  state,
  mutations
})

Count.vue

    <template>
      <div>
          <h2>{{msg}}</h2>
          <h3>{{$store.state.count}} - {{count}}</h3>
          <p> 
            <button @click="$store.commit('add')">+</button>
            <button @click="$store.commit('reduce')">-</button>
          </p>
      </div>
    </template>
    import store from '@/vuex/sotre'
    import {mapState} from 'vuex';
    <script>
        export default {
           data(){
              return{
                msg:'hello Vuex'
              }
          },
          computed:mapState(["count"]),
          store
        }
    </script>

三、Mutations修改状态
四、getters计算过滤属性
五、actions异步修改状态
这里面用了简写
1、...扩展运算符
2、import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
3、达到目的仓库+本页面的数据控制并存

store.js

import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex)
// //声明一个常量存放  状态对象
// const state = {
//       count:1
// }
// //声明一个常量，这里方法来控制常量
// const mutations = {
//     add (state){
//       state.count++;
//     },
//     reduce(state){
//       state.count--;
//     }
// }
// //暴露出去
// export default new Vuex.Store({
//   state,
//   mutations
// })
export default new Vuex.Store({
    state:{
        count:0,
        sex:'男'
    },
    getters:{
        count:function(state){
             return state.count += 11;
        }
    },
    actions:{
        addActions(context){
            context.commit('add',10)
            setTimeout(()=>{context.commit('reduce')},1000)
            console.log('addActions===========')
        },
        reduceActions({commit}){
            commit('reduce')
        }
    },
    mutations:{
        add(state,num){
            state.count+=num;
            // setTimeout(()=>{state.count--},1000)
            // console.log('add===========')
        },
        reduce(state){
            state.count--;
        }
    }
})

Count.vue

<template>
   <div>
     <h1>{{msg1}}</h1>
     <h2>{{$store.state.count}} -- {{count}}</h2>
     <h2>{{count}} {{sex}}</h2>
     <p>
        传递参数
       <button @click="$store.commit('add',10)">+</button>
       <button @click="$store.commit('reduce')">-</button>
     </p>

     <p>
        简化调用方法  mapState
       <button @click="add(10)">+</button>
       <button @click="reduce">-</button>
       <button @click="change">本组件的操作改变msg1</button>
     </p>

      <p>
        异步  mapActions
       <button @click="addActions">+</button>
       <button @click="reduceActions">-</button>
     </p>
   </div>
</template>


<script>
    import store from '@/vuex/store' 
    import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
    export default {
       data() {
           return {
              msg:'hello,Vuex'
           }
       }, 
       computed:{
          msg1(){
            return this.msg+'msg'
          },
          ...mapState(['count','sex']),
          // ...mapGetters(['count'])
       },
       methods:{
        ...mapMutations(['add','reduce']),
        ...mapActions(['addActions','reduceActions']),
        change(){
          this.msg = 'change,Vuex'
        }
       },
       store
    }
</script>

<style scoped>
</style>

六、module模块组(项目不大不用)

Vuex 数据仓库（随学随写）

推荐阅读更多精彩内容