关于 state

每个vuex 应用只有一个 store 实例,所以使用起来不会太复杂,对于定位错误状态和操作会很方便。

简单用法:在vuex 的计算属性中返回vuex 的状态

最基本的使用方式,通过在vue文件里面初始化 vuex 的 store 来进行操作 vuex 的数据:如下例子:

 1 // 在组件里面使用 vuex
 2 // 初始化 vuex 实例 
 3 const store = new Vuex.Store({
 4   state: {
 5     count: 0
 6   },
 7   mutations: {
 8     increment: state => state.count++,
 9     decrement: state => state.count--
10   }
11 })
12 
13 // 创建一个 Counter 组件
14 const Counter = {
15   template: `<div>{{ count }}</div>`,
16   computed: {
17     count () {
18         // 直接返回 state
19       return store.state.count
20     }
21   }
22 }
23 
24 // 初始化 vue 实例
25 const app = new Vue({
26   el: '#app',
27   components: { Counter },
28   template: `
29     <div class="app">
30      <button @click="increment">+</button>
31      <button @click="decrement">-</button> 
32      <counter></counter>
33     </div>
34   `
35   ,
36    methods: {
37     increment () {
38       store.commit('increment')
39     },
40     decrement () {
41         store.commit('decrement')
42     }
43   }
44 })
View Code

相关文章: