{"id":406,"date":"2022-04-19T16:08:38","date_gmt":"2022-04-19T08:08:38","guid":{"rendered":"http:\/\/gjweb.top\/?p=406"},"modified":"2022-04-19T16:08:39","modified_gmt":"2022-04-19T08:08:39","slug":"08-compositionapi-%e4%bd%bf%e7%94%a8-vuex","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=406","title":{"rendered":"08.CompositionAPi \u4f7f\u7528 Vuex"},"content":{"rendered":"\n

vue<\/p>\n\n\n\n

<template>
  <div class=\"about\">
    <h1>This is an about page<\/h1>
    <h2 @click=\"handleClick\">{{name}}<\/h2>
  <\/div>
<\/template>
<script>
import { toRefs } from 'vue';
import {useStore} from \"vuex\"
export default {
  setup() {
    const store = useStore();
    \/\/ const name = store.state.name;
    const {name} = toRefs(store.state);
    const handleClick = ()=>{
      store.commit(\"change\",\"123456\")
    }
    return {
      name,
      handleClick
    }
  },
}
<\/script>
\u200b<\/code><\/pre>\n\n\n\n
store\/index.js<\/p>\n\n\n\n
import { createStore } from 'vuex'
\/\/ Vuex \u5168\u5c40\u6570\u636e\u7ba1\u7406\u5668
\/\/ Vuex \u521b\u5efa\u4e86\u4e00\u4e2a\u5168\u5c40\u552f\u4e00\u7684\u4ed3\u5e93,\u7528\u6765\u5b58\u653e\u5168\u5c40\u7684\u6570\u636e
export default createStore({
  state: {
    name:\"hello world\"
  },
  \/\/ mutaion \u91cc\u9762\u53ea\u5141\u8bb8\u5199\u540c\u6b65\u4ee3\u7801,\u4e0d\u5141\u8bb8\u5199\u5f02\u6b65\u4ee3\u7801
  \/\/ commit he mutations \u505a\u5173\u8054
  mutations: {
    change(store,str){
      console.log(store)
      this.state.name = \"hello \"+str
    }
  },
  \/\/ dispatch \u548c cations \u505a\u5173\u8054
  actions: {
    \/\/ \u7b2c\u4e8c\u90e8 store \u611f\u77e5\u5230\u4e86\u89e6\u53d1\u4e86\u4e00\u4e2a\u53eb change \u7684 action ,\u6267\u884cchange
    change(){
      \/\/ \u7b2c\u4e09\u90e8 \u63d0\u4ea4\u4e00\u4e2acommit \u89e6\u53d1\u4e00\u4e2a mutation
      this.commit('change')
    }
  },
  modules: {
\u200b
  }
})<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
vue store\/index.js<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[],"class_list":["post-406","post","type-post","status-publish","format-standard","hentry","category-composition"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=406"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/406\/revisions"}],"predecessor-version":[{"id":407,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/406\/revisions\/407"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}