Pinia

Pinia 优势

• pinia体积小，只有1k；
• TS支持更加友好；
• 去掉Mutations，Actions支持同步或异步，操作state；
• 支持多个Store；
• 更简单的写法，代码更清晰简洁，支持 composition api 和 options api 语法。

注意：pinia需配合composition api一起使用，因为pinia用了composition api里面的一些api。

引入

vue2 + composition api配合使用pinia
main.ts

import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI);
Vue.use(PiniaVuePlugin);
const pinia = createPinia();
new Vue({
  router,
  store,
  pinia,
  render: h => h(App),
}).$mount('#app')

vue.config.js

chainWebpack: config => {
  config.module
    .rule('mjs') 
    .test(/.mjs$/)
    .type('javascript/auto')
    .include.add(/node_modules/)
    .end();
},
transpileDependencies: [
  '@vue/composition-api',
  'pinia',
  '@vue/devtools-api'
]

概念

修改state的方式
1、组件里直接修改 2、组件里调用$patch()方法 3、组件里调用Actions里面修改 建议：3 + 2 。 即

import { defineStore} from 'pinia';

export const useCounterStore = defineStore('counterStore', {
  state: () => ({
    count: 0
  }),
  actions: {
    // 不能用箭头函数，用箭头函数的话，this指向的是最外层的this
    increment() {
      // this.count++;
      this.$patch({
        count: this.count + 1
      });
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

组件使用

export default defineComponent({
  setup() {
    const counterStore = useCounterStore();
    const changeData = () => {
      counterStore.increment();
    }
    return {
      counterStore,
      changeData
    }
  }
})