浅谈vuex

时间 2019-12-20

标签浅谈 vuex 繁體版

原文原文链接

1.最初，对于两个组件，vmA，vmB，两个组件状态没有交集，当想经过改变div2里的input时，也改变div1的内容，怎么作？css

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>状态共享</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="div1" style="background-color: #ccc;">
  {{ message }}
</div>
<hr />
<div id="div2" style="background-color: #CDDC39;">
  {{ message }}
  <br/>
  <input type="text" v-model="message" name="">
</div>
<script>

const vmA = new Vue({
    el:'#div1',
    data: {
        message:'div1的内容'
    }
});
const vmB = new Vue({
    el:'#div2',
    data: {
        message:'div2的内容'
    }
});
</script>
</body>
</html>

2.能够经过一个全局的变量sourceOfTruth，来让两个组件共享一个状态，这样改变div2里的input时，也改变div1的内容，可是这样组件就只有共享的状态，这是很差的，那怎么办？html

参考：https://cn.vuejs.org/v2/guide/state-management.html#%E7%AE%80%E5%8D%95%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E8%B5%B7%E6%AD%A5%E4%BD%BF%E7%94%A8vue

<body>
<div id="div1" style="background-color: #ccc;">
  {{ message1 }}
  <br />
  {{ message2 }}
</div>
<hr />
<div id="div2" style="background-color: #CDDC39;">
  {{ message2 }}
  <!-- {{ message3 }} -->
  <br/>
  <input type="text" v-model="message2" name="">
</div>
<script>
const sourceOfTruth = {
    message1:'共享的内容1',
    message2:'共享的内容2'
}
const vmA = new Vue({
    el:'#div1',
    data: sourceOfTruth
});
const vmB = new Vue({
    el:'#div2',
    data: sourceOfTruth
});
</script>
</body>

3.能够让须要共享的状态放在全局的变量sourceOfTruth里，组件内保留私有的（无须共享的状态），此处咱们把sourceOfTruth改叫作store，而且组件要改变共享状态里的值，是经过触发store里的setMessageAction方法来实现的es6

<body>
<div id="div1" style="background-color: #ccc;">
  {{ sharedState.message2 }}
  <br />
  {{ privateState.message3 }}
  <br />
  {{ privateState.message4 }}
  <button @click="clearMessageAction">清除sharedState.message2</button>
</div>
<hr />
<div id="div2" style="background-color: #CDDC39;">
  {{ sharedState.message2 }}
  <br />
  {{ privateState.message3 }}
  <br/>
  <input type="text" v-model="sharedState.message2" name="">
</div>
<script>
var store = {
    debug: true,
    state: {
        message1:'共享的内容1',
        message2:'共享的内容2'
    },
    setMessageAction (newValue) {
        if (this.debug) console.log('setMessageAction triggered with', newValue)
        this.state.message2 = newValue
    },
    clearMessageAction () {
        if (this.debug) console.log('clearMessageAction triggered')
        this.state.message2 = ''
    }
}
var vmA = new Vue({
    el:'#div1',
    data: {
        privateState: {
            message4:'div1私有的内容'
        },
        sharedState: store.state
    },
    methods: {
        clearMessageAction: store.clearMessageAction.bind(store)
    }
})

var vmB = new Vue({
    el:'#div2',
    data: {
        privateState: {
            message3:'div2私有的内容'
        },
        sharedState: store.state
    }
})
</script>

4.组件要改变共享状态里的值，是经过(dispatch)触发store里的setMessageAction方法(action)来实现，这样能够让每次改变共享状态的值能够追踪。store纯粹只是一种约定俗成的叫法，能够取其余的名称。vuex

如今整个实现共享状态的方式已经浮在水面，其实这一整套思想叫作fluxnpm

5.vuex实际上是flux思想的vue版的实现api

6.用vuex改造上面的代码以下promise

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>状态共享</title>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/vuex@2.0.0/dist/vuex.js"></script>
</head>
<body>
<div id="div1" style="background-color: #ccc;">
  {{ sharedState.message1 }}
  <br />
  {{ sharedState.message2 }}
  <br />
  {{ privateState.message3 }}
  <br />
  {{ privateState.message4 }}
  <button @click="clearMessageAction">清除sharedState.message2</button>
</div>
<hr />
<div id="div2" style="background-color: #CDDC39;">
  {{ sharedState.message2 }}
  <br />
  {{ privateState.message3 }}
  <br/>
  <input type="text" v-model="sharedState.message2" name="">
</div>
<script>
var store = new Vuex.Store({
    strict: true,
    state: {
        message1:'共享的内容1',
        message2:'共享的内容2'
    },
    mutations: {
        setMessageAction (state, newValue) {
            console.log('setMessageAction triggered with', newValue)
            state.message2 = newValue
        },
        clearMessageAction (state) {
            console.log('clearMessageAction triggered')
            state.message2 = ''
        }
    }
});
var vmA = new Vue({
    el:'#div1',
    data: {
        privateState: {
            message4:'div1的内容'
        },
        sharedState: store.state
    },
    methods: {
        clearMessageAction: () => {
            store.commit('clearMessageAction')
        }
    }
})

var vmB = new Vue({
    el:'#div2',
    data: {
        privateState: {
            message3:'div2的内容'
        },
        sharedState: store.state
    }
})
</script>
</body>
</html>

剩下vuex的用法和api就参考 https://vuex.vuejs.org/zh/ide

Reference:ui

https://blog.csdn.net/u010644262/article/details/79443567

https://vuex.vuejs.org/zh/

1. 浅谈Vuex
2. 浅谈vuex
3. 浅谈Vuex的理解
4. 谈一谈Vuex
5. 浅谈vuex使用方法（vuex简单实用方法）
6. vuex浅入浅出
7. vuex浅析1
8. 谈谈对vuex的理解
9. Vuex 用例浅析
10. Vuex原理浅析
更多相关文章...
• NoSQL和传统数据库有什么区别？NoSQL能取代传统数据库吗？ - Redis教程
• MyBatis SqlSessionFactory - MyBatis教程
• 漫谈MySQL的锁机制
• Docker容器实战(八) - 漫谈 Kubernetes 的本质