vuex-zyr

1.0.1 • Public • Published

vuex-zyr

Vue状态管理插件.

Installation

$ npm install vuex-zyr

Example

<body>
  <div id="app">
    <div>姓名: {{ $store.state.name }}</div>
    <div>年龄: {{ $store.state.age }}</div>
    <div>getters年龄: {{ age }}</div>

    <button @click="$store.commit('changeName','李四')">改名</button>
    <button @click="$store.commit('changeAge',2)">改年龄</button>
    <button @click="syncChangeAge">异步改年龄</button>
  </div>

  <script src="./vue.main.js"></script>
  <script src="../dist/index.js"></script>

  <script>
    Vue.use(VuexZyr)
    const vm = new Vue({
      el: '#app',
      computed: {
        age () {
          return this.$store.getters.getAge
        }
      },
      methods: {
        ...VuexZyr.mapActions(['syncChangeAge'])
      },
      store: new VuexZyr.Store({
        strict: true, // 开启严格模式
        namespaced: true, // 开启命名空间
        showlog: true, // 显示修改日志
        persisted: true, // 开启持久化,刷新数据不丢失
        state: {
          name: '张三',
          age: 18,
          list: [1, 2, 3]
        },
        mutations: {
          changeName (state, newName) {
            state.name = newName
          },
          changeAge (state, age) {
            state.age += age
          }
        },
        getters: {
          getAge (state) {
            return state.age + 10
          }
        },
        actions: {
          syncChangeAge ({ commit }) {
            commit('changeAge', 10)
          }
        }
      })
    })
    console.log(vm)
  </script>
</body>

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.0.11latest

Version History

VersionDownloads (Last 7 Days)Published
1.0.11
1.0.00

Package Sidebar

Install

npm i vuex-zyr

Weekly Downloads

1

Version

1.0.1

License

ISC

Unpacked Size

181 kB

Total Files

17

Last publish

Collaborators

  • zhangyuru999