vuex 组合式API实践指南

1. 定义store

store/index.js 创建store对象并导出store

import { store } from "quasar/wrappers";
import { createStore } from "vuex";
export default store(function (/* { ssrContext } */) {
  const Store = createStore({
    //全局数据
    state: {
      num:'1'
    },
    //操作全局数据方法
    mutations: {
        //无参数执行方法
        addNum(state){
            state.num ++;
        },
        //携带参数执行方法
        addNum2(state,val){
            state.num +=val
        },
    },
    //异步操作在action中进行，再传递到mutation
    actions: {
    },
    //vuex允许我们将store分割成模块化（modules）
    modules: {
    }
  });

  return Store;
});

2. 使用store

2.1. 在模板中调用声名的num

<div>$store.state.num:{{$store.state.num}}</div>

<script>
import { useStore } from 'vuex'    // 引入useStore 方法
export default defineComponent({
    setup() {
        const store = useStore()    // 该方法用于返回store 实例
    }
});

</script>

2.2. 对state.num进行操作

vuex的store状态更新的唯一方式：提交 mutation
同步操作可以直接在mutatuions中直接进行
不能直接对state直接操作store.state.num +=44;，这样会丢失响应性。

<div class="num"> $store.state.num:{{$store.state.num}}</div>
<q-btn label="num+1" @click="numplus1"/>
<q-btn label="num+3" @click="numplus3"/>

<script>
import { useStore } from 'vuex'    // 引入useStore 方法
export default defineComponent({
    setup() {
        const store = useStore()    // 该方法用于返回store 实例
        //调用定义中addNum方法对num进行+1操作
        const numplus1 =()=>{
            store.commit('addNum')
        }
        const numplus3 =()=>{
            store.commit('addNum2',3)
        }
        return{
            numplus1,
            numplus3,
        }
    }
});

</script>