案例-计数

index.ts

// todo 1、 引入资源
import { createStore } from "vuex";
// todo 2、创建一个新的store实例
const store = createStore({
  //modules: 用于数据分块
  modules: {
    // key:value  key数据块名称 value vuex构成部分：state,actions,mutations
    countStore: {
      // 只分类，没起名
      namespaced: true, // namespaced 命名空间 使countStore成为它们名字
      state: {
        // state是数据 一定是个对象【单一数据源】 好管理
        n: 1,
      },
      actions: {
        // actions 也是一个对象 里面放置的是方法，这个方法的作用是创建动作然后发送给mutations
        // actions中的方法有两个参数 第一个参数是store，第二个参数是组件发送过来的信息
        increment(store, data) {
          const action = {
            // type: 动作类型[一般用常量表示]
            // payload: 组件传递过来的参数
            type: "INCREMENT",
            payload: data.val,
          };
          // 动作创建完成后 通过commit 发送action动作给mutations
          store.commit(action);
        },
        decrement(store, data) {
          const action = {
            type: "DECREMENT",
            payload: data.val,
          };
          store.commit(action);
        },
      },
      mutations: {
        // mutations也是对象,里面放置的是方法 。这个方法的方法名就是actions发送过来的action的type
        INCREMENT(state, action) {
          // state 就是我们的数据源
          // action 就是actions发送过来的action
          state.n += action.payload;
        },
        DECREMENT(state, action) {
          state.n -= action.payload;
        },
      },
    },
  },
});
// todo 3、导出store
export default store;
// 去main.ts

mian.ts

import { createApp } from 'vue'
import App from './App.vue'
// 激活store
import store from './store'
// todo 4、通过use方法来激活store这个单例
// createApp(App).mount('#app')
createApp(App).use(store).mount('#app')
// 去App.vue

App.vue

<template>
  <div>
    <p>{{n}}</p>
    <select name="" id="" v-model="val"> <!-- 为下面value的值 -->
      <option value="10">10</option>
      <option value="30">30</option>
      <option value="50">50</option>
    </select>
    <button @click="add">+</button>
    <button @click="decrease">-</button>
  </div>
</template>
<script lang="ts">
import { defineComponent,computed, reactive, toRefs } from 'vue'
// 在vuex中引处useStore
import {useStore} from 'vuex'
export default defineComponent({
  setup() {
    const state = reactive({
      val: ''
    })
    console.log(state.val)
    // 在setup中通过useStore得到一个store实例
    const store=useStore()
    console.log(store.state.countStore.n)
    console.log(store.state)
    // ？如何获得store中的数据
    // 通过计算属性方法到store中的数据
    const n = computed(() => store.state.countStore.n)
    // ？如何激活actions
  const add = () => {
    store.dispatch({
      type: 'countStore/increment', // type: 数据库名称/actions中的方法名
      val: Number(state.val) // 是字符串转成number 或者 xxx-0
    }) // 可以激活actions
  }
  const decrease=()=>{
    store.dispatch({ // 发送给数据块的信息
      type:'countStore/decrement',
      val:Number(state.val)
    })
  }
    return {
      n,
      add,
      decrease,
      ...toRefs(state)
    }
  },
})
</script>