vue中使用vuex详解

vue中使用vuex

首先创建一个store文件夹 在srore文件夹下 创建一个index.jx文件（文件夹命名看个人爱好）

State的使用(类似vue实列中的data数据源，来存取数据)

index.js文件中的内容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
    state:{
        count:0
    }
})
export default store

father.vue中的内容，获取state中的值

<template>
  <div>
   Store的使用
   vue中的state的count值：{{count}}
  </div>
</template>
 
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
     msg:1
    };
  },
 computed:{
  //  基本获取
  // count(){
  //  return this.$store.state.count
  // },
   
   // 利用辅助函数获取state中的值 首先要先导入
   // ...mapState({
        // 第一种方法
        // count: state => state.count,

        // 第二种 // 传字符串参数 'count' 等同于 `state => state.count`
         //count: 'count'
        //第三种想要使用this获取局部状态  必须使用常规函数
    //     count(state){
    //    return state.count + this.msg
    //     }
  //  })
  //也可以这样
  ...mapState(['count'])
 },
};
</script>
<style  scoped>
</style>

页面效果

getter的使用(类似vue实列中的计算属性，依赖宇state)

index.js文件中的内容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
    state:{
        todos: [
            { id: 1, text: 'name1', done: true },
            { id: 2, text: 'name2', done: false }
          ]
    },
    getters: {
        // 传一个参数，state就是vuex中state中的所有值
        doneTodos: state => {  //依赖于state中的值 类似计算属性
          return state.todos.filter(todo => todo.done)  //过滤  只返回todo.done为true的值
        },
     // 还可以传两个参数，第一个state就是vuex中state中的所有值，也可以接收也可以接受其他 getters 作为第二个参数：
     doneTodosCount:((state,getters)=>{
        return getters.doneTodos.length
     }),
     //你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
      getTodoById: (state) => (id) => {
       return state.todos.find(todo => todo.id === id)
  }
      }
})


export default store

brothr.vur中的neir

<template>
  <div>
    <p>getter的使用</p>
    <p v-for="(item,index) in doneTodos" :key="index" v-text="item.text"></p>
    <p>{{doneTodosCount}}</p>
    <p v-text="getTodoById(2).text"></p>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  created() {},
  computed: {
    //基本获取
    //    doneTodos(){
    //        return this.$store.getters.doneTodos
    //    },
    //    //接收vuex中的getter中的doneTodos
    //     doneTodosCount(){
    //        return this.$store.getters.doneTodosCount
    //    },
    //    //调用接收vuex中的getter返回的函数getTodoById
    //    getTodoById(){
    //         console.log(this.$store.getters.getTodoById(2))
    //      return this.$store.getters.getTodoById(2)

    //    },
    //利用计算属性来获取vuex中的getter 注意：先import导入
    ...mapGetters(["doneTodos", "doneTodosCount", "getTodoById"])
    //  如果你想将一个 getter 属性另取一个名字，使用对象形式：
    // ...mapGetters({
    //   // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
    //   done: 'doneTodos',
    //  doneTodos:doneTodosCount,
    //   getTodoBy:'getTodoById'
    // })
  }
};
</script>

<style scoped>
</style>

页面展示效果

Mutation的使用(同样依赖于state中的数据)

注意：Mutation 必须是同步函数

index.js中的内容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
    state:{
       count:1
    },
    //Mutation 必须是同步函数
    mutations:{
        add1(state){
            state.count++;
        },
        //当然你也可以传额外的参数  当然num也可以是一个对象
        add2(state,num){
            state.count+=num;
        }
        // add2(state,obj){
        //     state.count+=obj.num;
        // }
    }
})


export default store

father.vue中的内容

<template>
  <div>
   Mutation的使用
   vue中的state的count值：{{count}}
   <p><button @click="add">点击调用vuex中的Mutation方法</button></p>
    <p><button @click="adds(5)">点击调用vuex中的Mutation方法</button></p>
  </div>
</template>
 
<script>
import { mapState } from 'vuex'
import { mapMutations  } from 'vuex'
export default {
  data() {
    return {
     msg:1
    };
  },
 computed:{
  ...mapState(['count'])
 },

  methods:{
    //add(){
    //  this.$store.commit('add1')
     //this.$store.commit('add2',5) //传字符串 或者 number类型的写法 
    // this.$store.commit('add2',{num:5}) 这样写 传对象  或者下边这样的写法
    // this.$store.commit({
    //   type:'add2',
    //   num:5
    // })
    //利用辅助函数 一样先import导入
    
    //},
    //  ...mapMutations(['add1','add2']),
    // 或者可以换个命名 用对象的形式
    ...mapMutations({
      add:'add1',
      adds:'add2'
    })
  }
};
</script>
<style  scoped>
</style>

页面展示

Action的使用（可以进行异步的操作，同样可以结合Promise使用，具体例子看官网https://vuex.vuejs.org/zh/guide/actions.html）

index.js中的内容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
    state:{
       count:1
    },
    //Mutation 必须是同步函数
    mutations:{
        add1(state){
        state.count++;
        },
        //当然你也可以传额外的参数  当然num也可以是一个对象
        add2(state,num){
            state.count+=num;
        }
        // add2(state,obj){
        //     state.count+=obj.num;
        // }
    },
    //可以进行异步操作  用法和Mutation基本类似 都可以传参  只不过触发方法不一样。
    actions:{
        add1(context){ //或者通过 context.state 和 context.getters 来获取 state 和 getters。
            context.commit('add1')
        },
        add2({commit}){
            //actions不受限制 可以执行异步操作
            setTimeout(() => {
                commit('add2',5)
            }, 1000);
        }
    }
})


export default store

father.vue中的内容

<template>
  <div>
   Mutation的使用
   vue中的state的count值：{{count}}
  <p><button @click="add">点击调用vuex中的Mutation的add1方法</button></p>
  <p><button @click="adds(5)">点击调用vuex中的Mutation的add2方法</button></p>
 <p><button @click="addAction1">点击调用vuex中的Action的add1方法</button></p>
  <p><button @click="addAction2">点击调用vuex中的Action的add2方法</button></p>
  </div>
</template>
 
<script>
import { mapState } from 'vuex'
import { mapMutations  } from 'vuex'
import { mapActions  } from 'vuex'
export default {
  data() {
    return {
     msg:1
    };
  },
 computed:{
  ...mapState(['count'])
 },
  created(){
  
  },
  methods:{
    //add(){
    //  this.$store.commit('add1')
     //this.$store.commit('add2',5) //传字符串 或者 number类型的写法 
    // this.$store.commit('add2',{num:5}) 或者像下边这样写 传对象
    // this.$store.commit({
    //   type:'add2',
    //   num:5
    // })
    //利用辅助函数 一样先import导入
    
    //},
    //  ...mapMutations(['add1','add2']),
    // 或者可以换个命名 用对象的形式
    ...mapMutations({
      add:'add1',
      adds:'add2'
    }),
    addAction1(){
    this.$store.dispatch('add1')
    },
    addAction2(){
    this.$store.dispatch('add2')
    }
    //同样利用辅助函数 一样先import导入 和mapMutations用法一样 这里就不一一详细介绍
  }
};
</script>
<style  scoped>
</style>