Vue VueX基础

创建 store  注册VueX

// 引入Vue实例
import Vue from "vue";
// 引入VueX
import Vuex from "vuex";
// 将VueX use() 到Vue上 在这里在Vue原型链上添加了$store
Vue.use(Vuex);

注册VueX.Store({ })  对象 里面有五个参数

1. state 存放数据
2. mutations 存放同步方法
3. actions 存放异步方法
4. getters 存放计算属性
5. Module 对store实行模块化

state 的两种传值方式

state: {
  count: 100
},
// 在标签内直接引用
{{ $store.state.count }}
// 第一步引入vuex 解构出mapState
import { mapState } from 'vuex'
// 在计算属性中
computed: {
  ...mapState(['count']),//函数是对象的结构, 所以放到计算属性里面
},

 getters 计算属性的两种方法       对数据进行操作后一定要return 出去

  getters: {
    getadd(state) {
      return (state.count += 1001);
    },
    getsub(state) {
      return (state.count -= 10900);
    },
  },
// 第一种调用方法是用的
{{ $store.getters.getadd }}
// 第二种引入mapGetters
computed: {
    ...mapGetters(['getsub']) 
}

mutations 同步方法    的两种传值方式      

//在上面直接定义方法 通过commit方法来调用 第一个参数方法名  第二个参数值
btn() {
    this.$store.commit('add', 4)
},
// 第二种引入mapMutations  进行解构
import { mapMutations } from 'vuex'
// 在methods里面先导入方法 在this.方法 调用
methods: {
        ...mapMutations(['sub']), //引过来的是方法  需要在调用一下
        addSub() {
            this.sub(10)
        }
    }

actions: 异步方法 的两种传值方式          里面方法的参数是store可以直接  .方法名

//构造方法  模拟异步操作
actions: {
    timeAdd(store) {
      setTimeout(() => {
        store.commit("add", 10);
      }, 1000);
    },
    timeSub(store) {
      setTimeout(() => {
        store.commit("sub", 10);
      }, 1000);
    },
  },
// 第一种调用方式 也是在methods里面
// 调用 actions 使用dispatch
methods: {
    tiembtn() {
        this.$store.dispatch('timeAdd')
    }
}
// 第二种 导出 mapActios
import { mapActions } from 'vuex'
// 和mutations一样 导入方法 调用this.方法名
methods: {
    ...mapActions(['timeSub']),
    timeBtnSub() {
        this.timeSub()
    }
}

2023/4.25补充 

mutations里面第一个参数实例时status ，第二个是页面传递过来的值

actions里面第一个参数实例时store实例，第二个是传递到status里面的值

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

Vue.use(Vuex)

const store = new Vuex.Store({
	state:{
		conut:0
	},
	mutations:{
		add(status,value){
			status.conut+=value
		}
	},
	actions:{
		asyncAdd(store,value){
			store.commit('add',value)
		}
	}
})