我正在参加「4月日新计划更文活动」，详情请看：4月日新计划更文活动

🦖我是Sam9029，一个前端

Sam9029的掘金主页:Sam9029的掘金主页

**🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**

store 文件夹就是 vue-cli 项目里用于状态管理的

不使用辅助函数时
- 在组件调用时使用$store.state.dataName / this.$store.state.dataName调用
- 在组件调用时使用$store.commit('methodsFoo')调用

store 文件夹中 index.js 文件初始说明

引入

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

组件状态管理
state：等同于组件中的data
- 在组件使用时使用（ $store.state.dataName / this.$ store.state.dataName）调用
mutations：等同于组件中的methods
- 注意，修改 state 中的值的唯一路径；且无法在mutations的方法中调用actions方法，反之则可
- 在组件调用时使用（ $store.commit('methodsFoo') ）调用
getters: 等同于组件 computed
actions: 用于定义异步方法，如axios请求
- 使用 context.state.dateName 调用 state 中的值
- ⭐注意若想要通过 actions 修改 state 中的数据，是不支持直接操作的
  - ⭐注意 //直接定义方法第一个参数必须是context，实际指向 store 对象
  - ⭐注意 context.state.dateName 调用 state 中的值
  - ⭐注意若想要通过 actions 修改 state 中的数据，是不支持直接操作的
  - 应该调用 mutations 的方法间接修改
  - 调用时使用 context.commit('m',newValue)
  - ⭐注意 actions 调用 actions 中的方法，context.dispatch('')

export default new Vuex.Store({
  //等同于组件中的data
  //在组件使用时使用（$store.state.dataName / this.$store.state.dataName）调用
  state: {
    //直接定义dataName
  },

  //等同于组件中的methods，
  //注意，修改 state 中的值 的唯一路径；且无法在mutations的方法中调用actions方法，反之则可
  //在组件调用时使用（ $store.commit('methodsFoo') ）调用
  mutations: {
    //使用 state.dateName 操作 state 中的值 

    //直接定义方法 第一个参数必须时state
    methodsFoo(state){ 
        //code 
    }  

    //直接定义传参方法 -- 适用 于 通过组件内 数据双向绑定 操作修改state中的数据值
    //第一个参数必须时state, ⭐注意，mutations方法中只接受两个参数，第一个state，
    //若要传多个参数，第二个参数则可 封装成 对象 传递！！！！！！！！
    methodsFoo(state, newValue){
        //code 
    },  

  },

  //等同于组件 computed
  getters: {
     methodsFoo(state){
        //使用 state.dateName 操作 state 中的值
        return //code 
    },                              
  },
    
  //用于定义异步方法，如axios请求
  //使用 context.state.dateName 调用 state 中的值
  //⭐注意 若想要通过 actions 修改 state 中的数据，是不支持直接操作的
  actions: {
      //⭐注意 //直接定义方法 第一个参数必须是context，实际指向 store 对象
     methodsFoo(context){
        //⭐注意 context.state.dateName 调用 state 中的值
        //code 
    },
        
     //⭐注意 若想要通过 actions 修改 state 中的数据，是不支持直接操作的
     //应该调用 mutations 的方法 间接修改
     // 调用时使用 context.commit('m',newValue)
        
     //⭐注意  actions 调用 actions 中的方法，context.dispatch('')
  },

  modules: {
  }
})

state 和 mutations 使用实例

<template>
    <div>
        <h1>直接$store.state.countNumber：{{$store.state.countNumber}}</h1>
        <h1>data中this.$store.state.countNumber接受:{{count}}</h1>
        <h1>computed中 this.$store.state.countNumber接受:{{countComputed}}</h1>
        <p></p>
        <input 
            type="text" 
            v-model.lazy='count' 
            @change='$store.commit("transValueFoo",count)'>
        <button @click='$store.commit("incrementF")'> </button>
        <button @click='$store.commit("decrementF")'> </button>
    </div>
</template>

<script>
export default{
    data(){
        return{
            count:this.$store.state.countNumber
        }
    },
    computed:{
        countComputed(){
            return this.$store.state.countNumber
        }
    }   
}
</script>

store 文件

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

Vue.use(Vuex)

//组件状态管理
export default new Vuex.Store({
  //等同于组件中的data
  //在组件使用时使用（$store.state.dataName / this.$store.state.dataName）调用
  state: {
    countNumber:0
  },

  getters: {
  },

  //等同于组件中的methods，
  //注意，修改 state 中的值 的唯一路径
  //在组件使用时使用（ $store.commit('methodsFoo') ）调用
  //使用 state.dateName 操作 state 中的值 
  //直接定义方法 //第一个参数必须时state 
  //incrementF(state)
  //直接定义传参方法 -- 适用数据绑定，通过组件内操作修改state中的数据值 //第一个参数必须时state
  //transValueFoo(state, newValue)
  mutations: {

    incrementF(state){
      state.countNumber++;
    },  
    decrementF(state){
      state.countNumber--;
    },

    
    transValueFoo(state, newValue){
      state.countNumber = newValue;
    }  

  },

  actions: {
  },

  modules: {
  }
})

🦖我是Sam9029，一个前端

文章若有错误，敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**

Sam9029的掘金主页:Sam9029的掘金主页

【VueX学习】VueX 基础

store 文件夹 就是 vue-cli 项目里 用于状态管理的

🦖我是Sam9029，一个前端

store 文件夹就是 vue-cli 项目里用于状态管理的