Tabla de contenido
3. Opciones de configuración de Vuex
1, opciones de configuración de estado
2, opciones de configuración de captadores
3. Opciones de configuración de mutaciones
4, opciones de configuración de acciones
5, opciones de configuración de módulos
prefacio
Esta es una serie de aprendizaje, y muchos otros excelentes bloggers en la estación C también pueden registrar suficientes publicaciones de blog relacionadas. Se afirma que esta publicación de blog es el testigo de un proceso de aprendizaje en la forma en que el propio blogger aprende Vue. Si hay cualquier similitud, pura ¡Es una coincidencia! Todavía hay muchos conocimientos de aprendizaje en la parte de atrás. Muchos peces gordos de alto nivel nos han enseñado. Solo podemos decir que estamos aprendiendo y resumiendo sobre los hombros de nuestros predecesores. Todavía hay muchos bloggers en la estación C que registran el contenido de este libro. Si no le gusta, no lo rocíe. Solo registre los detalles. Bueno, ¡comencemos nuestro viaje de aprendizaje hoy! !
1. ¿Qué es Vuex?
Este Vuex es un modo de gestión de estado especialmente desarrollado para el desarrollo de proyectos Vue. Porque nuestros componentes vue tendrán su propio estado, y cada dato necesita compartir los datos requeridos. Simplemente podemos entender que la aplicación de Vuex es un contenedor, que se utiliza para definir los datos y las herramientas de procesamiento de datos en la aplicación. El núcleo es la tienda. Cuando el componente aplica el estado en la tienda, si el estado cambia, entonces los componentes correspondientes también cambiarán, y los datos de los componentes también se actualizarán.
Esta solicitud de autogestión estatal consta de las siguientes partes:
- State , la fuente de datos que impulsa la aplicación;
- Views , que mapea de forma declarativa el estado de las vistas;
- Acciones que responden a cambios de estado provocados por la entrada del usuario en la vista .
2. Instalar Vuex
1. Descarga Vuex.js
Podemos iniciar sesión en el sitio web oficial para descargar, aquí proporcionamos un enlace al sitio web oficial, puede descargarlo usted mismo.
https://vuex.vuejs.org/zh/installation.html
El sitio web oficial proporciona un método de enseñanza para la descarga. Simplemente puede echarle un vistazo. Todos los caminos conducen a Roma. Hay muchos métodos, por lo que no se apega al blog del editor.
2. Introducir vuex.js
Introducimos directamente nuestro vue.js en nuestra interfaz, y luego introducimos vuex.js.Este paso es simple, el código es el siguiente: puedes copiarlo directamente.
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>3. Uso de Vuex
En primer lugar, para usar Vuex, primero debemos crear una instancia de nuestro proyecto a través de la nueva palabra clave, que es un árbol de estado único. La sintaxis de nuestro código para crear la tienda se ve así:
new Vuex.store({
state:{}, //竹竿天，组件中需要我们共享的数据
mutations:{},//改变状态的唯一办就是提交mutations，同步我们改变的状态
actions：{} //用于同步更新状态
}）A continuación, debemos inyectar nuestra instancia de tienda en la instancia raíz de Vue;
var vm = new Vue({
el:'#app',
store,
})Finalmente, a través de la opción de tienda registrada en nuestra instancia raíz, esta instancia de tienda se inyectará en todos los subcomponentes de nuestro componente raíz, de modo que los subcomponentes accederán a los datos de la tienda a través de this.$store. Podemos entender nuestra comprensión de esta parte a través de un código de ejemplo.
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuex的使用</title>
</head>
<body>
<div id="app">
<p>姓名：{
{name}}</p>
<p>性别：{
{gender}}</p>
<p>年龄：{
{age}}</p>
</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
var store = new Vuex.Store({
state:{
name:'丘比特',
gender:'男',
age:22
},
})
var vm = new Vue({
el:'#app',
store,
computed:{
name(state){return this.$store.state.name},
gender(state){return this.$store.state.gender},
age(state){return this.$store.state.age},
}
})
</script>
</html>resultado de la operación:
Podemos ver que nuestra instancia ya puede mostrar los datos en nuestro estado.
3. Opciones de configuración de Vuex
Grabamos la parte de vue del estudio anteriormente, y también tenemos las opciones de configuración de vue relacionadas, por lo que Vuex también tiene su parte correspondiente de las opciones de configuración, si necesita ver las opciones de configuración de vue, puede ir a la página de inicio del blogger para buscar si estas interesado..
Al crear una instancia de tienda, debemos pasar un objeto de configuración, que explicaremos uno por uno.
1, opciones de configuración de estado
Para agregar un poco de conocimiento aquí, el almacenamiento de estado de Vuex responde de inmediato.Cuando nuestro componente vue lee datos de la tienda, si los datos cambian, los datos de la tienda en la página también cambiarán.
En nuestro código de ejemplo anterior, podemos saber que se accede a los datos de nombre en el estado a través de "this.$store.state.name". Cuando un componente necesita obtener varios componentes, todos estos estados se declaran como cálculos. El atributo calculado es un poco engorroso, porque para resolver la intención original de engorroso, nuestro Vuex proporciona una función auxiliar mapState para generar propiedades calculadas.
Al usar esta función auxiliar, primero debe introducir esta función. Los parámetros de esta función auxiliar se escriben de dos formas: matriz y objeto. Podemos entenderlo a través de un código de ejemplo.
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuex的使用</title>
</head>
<body>
<div id="app">
<p>姓名：{
{name}}</p>
<p>博客：{
{boke}}</p>
<p>码龄：{
{age}}</p>
<p>*************************</p>
<p>姓名：{
{n1}}</p>
<p>博客：{
{n2}}</p>
<p>码龄：{
{n3}}</p>
</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
var store = new Vuex.Store({
state:{
name:'丘比特',
boke:'丘比特惩罚陆',
age:1
},
})
var mapState = Vuex.mapState;
var vm = new Vue({
el:'#app',
store,
computed:{
...mapState(["name","boke","age"]),//mapstate数组的写法
...mapState({n1:"name",n2:"boke",n3:"age"})//mapstate对象的写法
}
})
</script>
</html>resultado de la operación:
2, opciones de configuración de captadores
En la tienda anterior, cuando se usa, se derivarán algunos datos que debemos procesar. Vuex puede permitir que la opción "captador" se defina en la tienda. El captador almacenará nuestro valor de retorno de acuerdo con las dependencias que proporciona. Cuando el valor de dependencia cambia, el captador también se recalculará. En resumen, se calcula con computado las propiedades son las mismas. Entendemos nuestras opciones de propiedad a través de un código.
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuex的使用</title>
</head>
<body>
<div id="app">
<h1>电影：《隐入烟尘》票价</h1>
<p>票价：{
{total}}</p>
<p>总票价：{
{totalprice}}</p>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2022%252F0812%252F3e335b62j00rggmlw001oc000hs00awg.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664263935&t=45b74bdee4889fa5660d0418f1043919" alt="">
</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
var store = new Vuex.Store({
state:{
price:'100',
num:'2',
},
getters:{
total(state){
return state.price * state.num;
}
}
})
var mapGetters = Vuex.mapGetters;
var vm = new Vue({
el:'#app',
store,
computed:{
...mapGetters(['total']),
...mapGetters({totalprice:'total'})
}
})
</script>
</html>resultado de la operación:
3. Opciones de configuración de mutaciones
En cada mutación hay un tipo de evento de cadena y una función de devolución de llamada. Porque si queremos modificar los datos de la tienda, entonces tenemos que enviar la mutación, y también es una función de sincronización, para que podamos rastrear los cambios de cada estado. Hay dos formas de enviar mutaciones en nuestro componente. Todos podemos usar el siguiente código para comprender el contenido de las opciones de configuración de esta mutación.
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuex的使用</title>
</head>
<body>
<div id="app">
<h1>{
{num}}</h1>
<button @click="reduce">减5</button>
<button @click="add({n:10})">加5</button>
</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
var store = new Vuex.Store({
state:{
num:100,
},
mutations:{
decrement(state){
state.num--
},
increment(state,payload){
state.num+=payload.n
},
},
})
var mapState = Vuex.mapState;
var vm = new Vue({
el:'#app',
store,
computed:{
...mapState(["num"])
},
methods:{
reduce(){
//这里是通过mutation修改store的状态的意思
this.$store.commit("decrement");
},
add(){
this.$store.commit({type:"increment",n:10});
}
}
})
</script>
</html>resultado de la operación:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuex的使用</title>
</head>
<body>
<div id="app">
<h1>我想象的中秋国庆放假天数：</h1>
<h1>{
{num}}</h1>
<button @click="reduce({n:5})">减5</button>
<button @click="add({n:10})">加10</button>
</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
var store = new Vuex.Store({
state:{
num:100,
},
mutations:{
decrement(state,payload1){
state.num-=payload1.n
},
increment(state,payload2){
state.num+=payload2.n
},
},
})
var mapState = Vuex.mapState;
var vm = new Vue({
el:'#app',
store,
computed:{
...mapState(["num"])
},
methods:{
reduce(){
//这里是通过mutation修改store的状态的意思
this.$store.commit({type:"decrement",n:5});
},
add(){
this.$store.commit({type:"increment",n:10});
}
}
})
</script>
</html>resultado de la operación:
Podemos ver los cambios en nuestros datos haciendo clic y, por supuesto, también podemos ir a la parte Vue 1 de nuestro fondo para ver los cambios en nuestros datos de estado.
4, opciones de configuración de acciones
Las opciones de configuración en esta sección de acciones son un poco similares a nuestras opciones de configuración de mutación anteriores, pero a diferencia de la mutación anterior, la acción enviada es la opción de configuración de mutación, que es más simple y rudimentaria, ya que no cambia directamente nuestro estado. . La acción puede contener muchas operaciones asíncronas, que pueden modificar los datos en el estado de forma asíncrona. La modificación asincrónica del estado también requiere enviar una mutación para lograr el propósito de la modificación.
Esta función de acción acepta un objeto de contexto con los mismos métodos y propiedades que la instancia de la tienda, por lo que puede enviar una mutación para obtener datos de estado o captadores. Echemos un vistazo al código.
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuex的使用</title>
</head>
<body>
<div id="app">
<h1>我想象的日增资金：</h1>
<h1>{
{num}}</h1>
<button @click="add()">>+100</button>
</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
var store = new Vuex.Store({
state:{
num:100,
},
mutations:{
increment(state,payload){
state.num+=payload.n
},
},
actions:{
async ayscIncrement({commit},payload){
setTimeout(()=>{
commit('increment',payload)
},1000)
}
}
})
var mapState = Vuex.mapState;
var vm = new Vue({
el:'#app',
store,
computed:{
...mapState(["num"])
},
methods:{
add(){
this.$store.dispatch({type:"ayscIncrement",n:100});
}
}
})
</script>
</html>resultado de la operación:
Puedes ver los resultados de nuestra demostración arriba. Por supuesto, todavía podemos usar la función de ayuda mapAions para simplificar la modificación. ¡Aquí puedes resolverlo por ti mismo!
5, opciones de configuración de módulos
Cuando usamos un árbol de estados de un solo componente, todos los estados que se pueden aplicar se agruparán en un objeto más grande, pero cuando la aplicación es particularmente compleja, nuestra tienda aparecerá muy vacía. Entonces, para resolver este problema, nuestro Vuex divide la tienda en muchos módulos, de modo que cada módulo tiene su propio estado, mutación, acción, etc., lo que se ve más hermoso. Podemos ver de qué se trata todo esto a través del código de ejemplo.
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuex的使用</title>
</head>
<body>
<div id="app">
<h1>{
{this.$store.state.store1.num}}</h1>
<h1>{
{this.$store.state.store2.num}}</h1>
</div>
</body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
const module1 = {
state:{
num:100
},
getters:{},
mutations:{},
actions:{}
}
const module2 = {
state:{
num:200
},
getters:{},
mutations:{},
actions:{}
}
var store = new Vuex.Store({
modules:{
store1:module1,
store2:module2,
}
})
var vm = new Vue({
el:'#app',
store,
})
</script>
</html>resultado de la operación:
