Концепция : vuex эквивалентен общедоступному хранилищу, в котором хранятся данные, которые могут совместно использоваться всеми компонентами, а хранящиеся данные являются адаптивными, обеспечивая синхронизацию страниц и данных.
Преимущества : Если вы хотите использовать данные предков в подкомпонентах, вам не нужно передавать значения слой за слоем, а также это решает проблему, заключающуюся в том, что родственные компоненты не могут напрямую передавать значения.
более конкретно:
-
Он может централизованно управлять общими данными в vuex, что удобно для разработки и последующего обслуживания.
-
Он может эффективно реализовать обмен данными между компонентами и повысить эффективность разработки.
-
Данные, хранящиеся в vuex, являются адаптивными, и при изменении данных данные на странице также будут обновляться синхронно.
Оглавление
Способ 1. Используйте непосредственно в метке: { {this.$store.state.name}}
Способ 2: имя данных this.$store.state.global
Способ 3: вычисляемое свойство (вернуть this.$store.state.count)
Способ 4: вспомогательная функция mapState (отображается в вычисляемом свойстве)
Способ 1: this.$store.commit('xxx')
Способ 2: вспомогательная функция mapMutations (отображается в методах)
Способ 1. Запускайте действия с помощью метода $store.dispatch().
Способ 2: вспомогательная функция mapActions (отображается в методах)
Способ 1: доступ к { {this.$store.getters.showCount} через атрибуты
Метод 2: вспомогательная функция mapGetters (сопоставленная в вычисляемых свойствах)
Установка Vuex
$ npm install vuex --saveVue.use()В модульной системе упаковки Vuex должен быть установлен явно через
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)1. Государство
Штат предоставляет единственный общедоступный источник данных, и все общие данные должны храниться в State in Store.
const store= new Vuex.Store({
//数据，相当于data
state: {
name:"张三",
count:0}
//可以拿到state里的数据，操作state数据的方法
mutation:{
add(state){
state.count=state.count+1}
}Конкретное использование:
1. Создайте новый файл src/store/index.js.
// 新建 src/store/index.js 文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {},
actions: {},
getters: {}
})2. Введите в запись main.js
import Vue from 'vue'
import App from './App.vue'
// 引入
import store from './store'
Vue.config.productionTip = false
new Vue({
// 挂载，把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
store: store,
render: h => h(App)
}).$mount('#app')Зарегистрировав параметр хранилища в корневом экземпляре, экземпляр хранилища будет внедрен во все подкомпоненты корневого компонента, и доступ к подкомпонентам можно будет получить через this.$store.
Пока объект vuex (store:store) сохраняется в предке, общие данные могут использоваться как предками, так и потомками.
Как использовать состояние:
Способ 1. Используйте непосредственно в теге: <p>{
{this.$store.state.name}}</p>
<p>{
{this.$store.state.name}}</p>
Способ 2: имя данных this.$store.state.global
{
{$store.state.全局数据名称}}<template>
<div>
<h3>当前最新的count值为：{
{ $store.state.count }}</h3>
<button>++</button>
</div>
</template>
Способ 3: вычисляемое свойство (вернуть this.$store.state.count)
Самый простой способ прочитать состояние из экземпляра хранилища — вернуть некоторое состояние в вычисляемом свойстве :
посмотрите! Чтобы лучше понять вспомогательную функцию mapState, которая будет описана ниже, я написал два способа написания этого кода.
<template>
<div>{
{ count }}</div>
</template>
<script>
export default {
computed: {
count () {
return this.$store.state.count;//这么写太麻烦啦，看下面我的语法糖，我的简化写法
...mapState(['count'])//我是上面那行的简化写法！我用了辅助函数mapState，映射在computed中
}
}
}
</script>Однако этот шаблон приводит к тому, что компоненты полагаются на одноэлементное состояние для глобального состояния. В модульной системе сборки требуется частый импорт каждого компонента, которому требуется состояние.
方式四：mapState Вспомогательные функции (сопоставленные в вычисляемых свойствах)
Данные сопоставляются с вычисляемыми свойствами: Computed:{ ...mapState(['имя глобальных данных']) }
Когда компоненту необходимо получить несколько состояний, было бы несколько повторяющимся и избыточным объявлять эти состояния как вычисляемые свойства. Чтобы решить эту проблему, mapState вспомогательные функции помогают нам генерировать вычисляемые свойства, экономя вам несколько нажатий клавиш:
<template>
<div>
<h3>当前最新的count值为：{
{ count }}</h3>
<button>--</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {}
},
computed: {...mapState(['count'])}
}
</script>
Во-вторых, мутации
Проще говоря: метод хранения и управления состоянием, а также метод отправки и обновления состояния, то есть для изменения значения.
Примечание. В Vuex все мутации синхронны .
Единственный способ изменить состояние в хранилище Vuex — отправить мутацию.
Мутации во Vuex очень похожи на события: каждая мутация имеет строковый тип события (тип) и функцию обратного вызова (обработчик) .
mutations: {
//第一个形参永远都是state, 第二个形参是调用add时传递的参数
add(state, step) {
state.count += step
}
}Как используются мутации:
Способ 1: this.$store.commit('xxx')
<template>
<div>
<h3>当前最新的count值为：{
{ $store.state.count }}</h3>
<button @click="add">++</button>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
//第二种方式，两种达到的目的一致，用辅助函数可以简化写法。映射在method中。
...mapMutations(['add'])
add() {
//第一种方式：commit就是调用某个mutation函数
this.$store.commit('add', 1)
this.add(1)//第二种方式
}
}
}
</script>
<style lang="less" scoped></style>Чтобы лучше понять вспомогательные функции ниже, я также сравнил написание вспомогательных функций выше.
Метод 2: mapMutationsВспомогательная функция (отображается в методах)
Используйте mapMutationsотображение вспомогательных функций в методах
<template>
<div>
<h3>当前最新的count值为：{
{ count }}</h3>
<button @click="btn">--</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
data() {
return {}
},
methods: {
// 第二种方式
// 将 this.sub() 映射为 this.$store.commit('sub')
...mapMutations(['sub']),
btn() {
this.sub(2)
}
},
computed: mapState(['count'])
}
</script>
<style lang="less" scoped></style>В-третьих, действия
Действие похоже на мутацию, оно специально обрабатывает асинхронность , разница в следующем:
-
Действие вызывает мутацию вместо непосредственного изменения состояния. Именно мутация фактически изменяет значение.
-
Действие может содержать произвольные асинхронные операции. мутация может содержать только синхронные операции
Как использовать действия:
Способ 1. this.$store.dispatch()Запуск действий с помощью метода.
注：store文件夹下的index.js
export default new Vuex.Store({
state:{
count:111,
name:'笛子兔'
},
mutations:{
add(state,s){
state.count+=s
}
},
actions:{
addlow(c,step){
setTimeout(()=>{
//Action 提交的是 mutation，而不是直接变更state，真正修改值的还是mutation。
c.commit('add',step)//mutation中的add
},2000)
}
},
getters:{},
})
注：在使用vuex的组件中
<template>
<div class="hello">
{
{count}}
<input type="button" @click='adds' value='点我加'>
<input type="button" @click='addAction' value='点我慢加'>
</div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'
export default {
name: 'HelloWorld',
computed:{
...mapState(['count'])
},
methods:{
//mutation语法糖--map辅助寒素
...mapMutations(['add']),
//actions语法糖--map辅助函数
...mapActions(['addlow']),
adds(){
//commit调用某个mutation的函数
// this.$store.commit('add',100)
this.add(100)
},
addAction(){
// dispatch专门用来触发action
// this.$store.dispatch('addlow',333)
this.addlow(444)
}
}
}
</script>
Метод 2: mapActionsВспомогательная функция (отображается в методах)
Используйте mapActions вспомогательные функции для отображения методов, метод написания аналогичен мутации по сравнению с приведенным выше кодом.
Четверо, добытчики
Соответствует расчетному.
Он будет только обертывать данные, сохраненные в Магазине, и не будет изменять данные, сохраненные в Магазине.
Когда данные в Store изменяются, контент, генерируемый Getter, также будет меняться соответствующим образом.
Дополните разницу между вычисляемыми атрибутами и атрибутами мониторинга:
①Первоначальная цель вычисляемого дизайна: хранить сложные выражения в шаблонах. На основе адаптивного кэширования он будет переоцениваться только при изменении. Вызывается несколько раз, прежде чем изменение будет выполнено только один раз.
②Первоначальное назначение атрибута мониторинга: отслеживать изменения данных.
Если данные кэшируются с вычисленным свойством компонента. Если данные находятся в vuex, кэшируйте их с помощью геттеров.
getters: {
// 添加了一个 showCount
showCount: state => {
return '最新的count值: ' + state.count
}
}Как использовать геттеры
Способ 1: доступ к { {this.$store.getters.showCount} через атрибуты
Способ 2. mapGettersВспомогательные функции (сопоставленные в вычисляемых свойствах)
Ниже приводится краткое описание использования четырех вспомогательных функций, отмеченных
<template>
<div>
<h3>{
{ showCount }}</h3>
<button @click="btn">--</button>
<button @click="btn2">-- Async</button>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
data() {
return {}
},
methods: {
//mutations语法糖--映射在methods
// 将 this.sub() 映射为 this.$store.commit('sub')
...mapMutations(['sub']),
btn() {
this.sub(2)
},
// actions语法糖--映射在methods
// 将this.subAsync() 映射为 this.$store.dispatch('subAsync')
...mapActions(['subAsync']),
btn2() {
this.subAsync(5)
}
},
computed: {
//state语法糖--映射在computed
...mapState(['count']),
//getters语法糖--映射在computed
...mapGetters(['showCount'])
}
}
</script>Прочитав столько, я устал~ Подведем итоги~
Vuex, эквивалентный общедоступному хранилищу, хранит данные, которые могут использоваться всеми компонентами. Сохраненные данные быстро реагируют и обеспечивают синхронизацию страниц и данных. Совместное использование данных между компонентами делает разработку очень эффективной.
1. Состояние — используется для хранения данных, единственный общедоступный источник данных.
Как использовать состояние:
Способ 1. Используйте непосредственно в метке: { {this.$store.state.name}}
Способ 2: имя данных this.$store.state.global
Способ 3: вычисляемое свойство (вернуть this.$store.state.count)
Метод 4: вычисляется вспомогательная функция mapState (сопоставленная в вычисляемом свойстве) : { ...mapState(['имя глобальных данных']) }
2. Мутации — метод отправки и обновления состояния. В Vuex все мутации синхронизированы.
Единственный способ изменить состояние в хранилище Vuex — отправить мутацию.
//Первый формальный параметр всегда является состоянием, а второй формальный параметр — это параметр, передаваемый при вызове метода
Как используются мутации:
Способ 1: this.$store.commit('xxx')
Способ 2: вспомогательная функция mapMutations (отображается в методах)...mapMutations(['имя метода мутации'])
3. Действия — аналогичны мутациям, которые обрабатываются асинхронно , разница в том, что действия отправляют мутации вместо прямого изменения состояния, а мутации фактически изменяют значение . мутация может содержать только синхронные операции
Как использовать действия:
Способ 1. Запускайте действия с помощью метода $store.dispatch().
Способ 2: вспомогательная функция mapActions (отображается в методах)...mapActions(['Имя метода Actions'])
4. Геттеры — аналогичны вычисляемым свойствам, используются для кэширования, хранения выражений, и если данные являются компонентом, они кэшируются вместе с вычисленными свойствами. Если данные находятся в vuex, кэшируйте их с помощью геттеров.
Как использовать геттеры:
Способ 1: доступ к { {this.$store.getters.showCount} через атрибуты
Метод 2: вспомогательная функция mapGetters (сопоставленная в вычисляемых свойствах) ...mapGetters(['showCount'])
Для вспомогательных функций: геттеры и состояние сопоставляются с вычисляемыми свойствами, мутации и действия сопоставляются с методами.
Сзади также есть модульность, которая подойдет для друзей, которые досконально разобрались в этом, и их может быть больше.