vuex基本使用

1、没有使用vuex时

  <div>
      <h2>当前求和：{{sum}}</h2>
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="add">+</button>
      <button @click="sub">-</button>
      <button @click="oddadd">和为奇数再加</button>
      <button @click="awaitadd">等会加</button>
  </div>

实现：

    data(){
        return{
            n:1,
            sum:0
        }
    },
    methods:{
        add(){
            this.sum += this.n;
        },
        sub(){
            this.sum -= this.n;
        },
        oddadd(){
            if(this.sum%2){
                this.sum += this.n;
            }
        },
        awaitadd(){
            setTimeout(()=>{
                this.sum += this.n;
            },3000)
        }
    }

2、使用vuex
在main.js 引入 import store from ‘./store’ ，再放入 new vue({})中。
store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    sum:0
  },
  //mutations 必须是同步函数
  mutations: {
    //大多情况下  参数value应该是一个对象
   // store.commit('addTo',{num:1})   state.sum += value.num
    addTo(state,value){
        //修改sum 的值
        state.sum += value;
    },
    subTo(state,value){
        state.sum -= value;
    }
  },
  actions: {
    // context 对象 具有与 store 实例 相同方法和属性
    //可以通过context.commit 提交一个 mutation。
    //或者通过 context.state 和 context.getters 来获取 state 和 getters
    oddAdd(context,value){
        if(context.state.sum%2){
          context.commit('addTo',value)
        }
    },
    awaitAdd(context,value){
      setTimeout(()=>{
        context.commit('addTo',value)
      },3000)
    }
  },
  modules: {
  }
})

在vue组件中：
$store.state.sum

  <div>
      <h2>当前求和：{{$store.state.sum}}</h2>
      <h2>当前求和：{{Sum}}</h2>
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="add">+</button>
      <button @click="sub">-</button>
      <button @click="oddadd">和为奇数再加</button>
      <button @click="awaitadd">等会加</button>
  </div>

实现

    data(){
        return{
            n:1,
            // sum:0
        }
    },
        //Vuex 的状态存储是响应式的 
    //从 store 实例中读取状态state值最简单的方法就是在计算属性中返回某个状态
    computed:{
        Sum(){
        return this.$store.state.sum
        }
    },
    methods:{
        add(){
            // this.sum += this.n;
            this.$store.commit('addTo',this.n);
        },
        sub(){
            // this.sum -= this.n;
            this.$store.commit('subTo',this.n);
        },
        oddadd(){
            // if(this.sum%2){
            //     this.sum += this.n;
            // }
            this.$store.dispatch('oddAdd',this.n)
        },
        awaitadd(){
            // setTimeout(()=>{
            //     this.sum += this.n;
            // },3000)
            this.$store.dispatch('awaitAdd',this.n)
        }
    }

或者使用 mapMutations、mapActions 辅助函数将组件中的 methods 映射为 store.commit。
记住需要参数传递时@click="fun(n)”绑定事件时带参数

  <div>
      <h2>当前求和：{{$store.state.sum}}</h2>
      <h2>当前求和：{{Sum}}</h2>
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="add(n)">+</button>
      <button @click="sub(n)">-</button>
      <button @click="oddadd(n)">和为奇数再加</button>
      <button @click="awaitadd(n)">等会加</button>
  </div>

实现

<script>
import { mapState,mapMutations,mapActions} from 'vuex'
export default {
    data(){
        return{
            n:1,
            // sum:0
        }
    },
    //Vuex 的状态存储是响应式的 
    //从 store 实例中读取状态state值最简单的方法就是在计算属性中返回某个状态
    computed:{
        // Sum(){
        // return this.$store.state.sum
        // }
        ...mapState({Sum:'sum'})
        //数组方法：计算属性名称跟vuex中的一样  直接使用：
        // ...mapState(['sum'])
        //注意点  当直接 computed：...mapState({Sum:'sum'}) 而没有{}包裹时是直接整个映射了，在这个组件的computed不能再去做其他这样的了：computed：{  xxx(){}}
    },
    methods:{
    //对象形式
    // 举例说明将 `this.add()` 映射为 `this.$store.commit('addTo')`
        ...mapMutations({add:'addTo',sub:'subTo'}),
        ...mapActions({oddadd:'oddAdd',awaitadd:'awaitAdd'})
    }
}
</script>

数组形式：当事件方法名跟vuex中相同的情况下
需要传递参数时 在绑定事件时传递

  <div>
      <h2>当前求和：{{$store.state.sum}}</h2>
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="addTo(n)">+</button>
      <button @click="subTo(n)">-</button>
      <button @click="oddAdd(n)">和为奇数再加</button>
      <button @click="awaitAdd(n)">等会加</button>
  </div>

<script>
import { mapMutations,mapActions} from 'vuex'
export default {
    data(){
        return{
            n:1,
            // sum:0
        }
    },
    methods:{
    //数组形式  事件名称跟vuex中的一样
    // 将 `this.addTo()` 映射为 `this.$store.commit('addTo')`
        ...mapMutations(['addTo','subTo']),
        ...mapActions(['addAdd','awaitAdd']),
}
</script>

计算属性：getters：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    sum:0,
  },
  //相当于计算属性
  getters:{
    getEven(state){
      return state.sum*2
    }
  },
  mutations: {
    addTo(state,value){
        state.sum += value;
    },
    subTo(state,value){
        state.sum -= value;
    }
  },
  actions: {
    oddAdd(context,value){
        if(context.state.sum%2){
          context.commit('addTo',value)
        }
    },
    awaitAdd(context,value){
      setTimeout(()=>{
        context.commit('addTo',value)
      },3000)
    }
  },
  modules: {
  }
})

  <div>
      <h2>当前求和：{{Sum}}</h2>
      <h2>使用getters：{{geteven}}</h2>
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="add(n)">+</button>
      <button @click="sub(n)">-</button>
      <button @click="oddadd(n)">和为奇数再加</button>
      <button @click="awaitadd(n)">等会加</button>
  </div>

<script>
import { mapMutations,mapActions} from 'vuex'
export default {
    data(){
        return{
            n:1,
            // sum:0
        }
    },
    computed:{
      //state
        Sum(){
        return this.$store.state.sum
        },
        //getter
        geteven(){
            return this.$store.getters.getEven
        }
    },
    methods:{
        ...mapMutations({add:'addTo',sub:'subTo'}),
        ...mapActions({oddadd:'oddAdd',awaitadd:'awaitAdd'})
    }
}
</script>

使用mapGetters

<script>
import { mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    data(){
        return{
            n:1,
            // sum:0
        }
    },
    computed:{
         ...mapState({Sum:'sum'}),
        //getter
        ...mapGetters({geteven:'getEven'})
    },
    methods:{
        ...mapMutations({add:'addTo',sub:'subTo'}),
        ...mapActions({oddadd:'oddAdd',awaitadd:'awaitAdd'})
    }
}
</script>

vuex模块化

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user.js'
import count from './modules/count.js';
Vue.use(Vuex)
export default new Vuex.Store({
  modules:{
      user,
      count
  }
})

store/modules/user.js

export default{
    namespaced:true,
    state:{
        lastName:'李',
        firstName:'小小'
    },
    getters:{
        fullName(state){
            return state.lastName + state.firstName
        }
    },
    mutations:{
        changefirstName(state,value){
            state.firstName = value
        },
        changeLastName(state,value){
            state.lastName = value
        }
    },
    actions:{
        awaitChange(context,value){
            setTimeout(()=>{
                context.commit('changeLastName',value)
            },2000)
        }
    }
}

store/modules/count.js

export default{
    namespaced:true,
    state: {
        sum:0,
        school:'society'
      },
      //相当于计算属性
      getters:{
        getEven(state){
          return state.sum*2
        }
      },
      mutations: {
        addTo(state,value){
            state.sum += value;
        }
      },
      actions: {
        awaitAdd(context,value){
          setTimeout(()=>{
            context.commit('addTo',value)
          },3000)
        }
      },
      modules: {
      }
}

组件中：
v-model绑定vuex中的数据

  <div>
      <h2>使用count的state：{{sum}}</h2>
      <h2>使用count的getters：{{geteven}}</h2>
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="add(n)">+</button>
      <button @click="awaitadd(n)">等会加</button>
      <br/>
      姓：<input type="text" v-model="lastName" >
      名：<input type="text" v-model="firstName" >
      <br/>
      使用user的getter——全名: <span>{{fullName}}</span>
  </div>

实现：

<script>
import { mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    data(){
        return{
            n:1,
        }
    },
    computed:{
        ...mapState("count",["sum","school"]),
        ...mapGetters("count",{geteven:'getEven'}),
        //注意这里  平时我们使用计算属性时一般获取get也就是
        // computed:{
        //     firstName:{
        //         get(){
        //             xxxx
        //         }
        //     }
        // }
        // 为了方便我们常常：   firstName并非函数
        // computed:{
        //     firstName(){
        //         xxxxx
        //     }
        // }
        firstName:{
            get(){
                return this.$store.state.user.firstName
            },
            set(value){
                this.$store.commit('user/changefirstName',value)
            }
        },
        lastName:{
            get(){
                return this.$store.state.user.lastName
            },
            set(value){
                this.$store.dispatch('user/awaitChange',value)
            }
        },
        ...mapGetters('user',['fullName']) 
    },
    methods:{
        ...mapMutations("count",{add:'addTo',}),
        ...mapActions("count",{awaitadd:'awaitAdd',}),     
    }
}
</script>